質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

1707閲覧

【wordpress】別タブにあるアンカーリンクに飛ばしたい【shortcodes ultimate】

Mmarie

総合スコア22

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/11/18 12:00

編集2020/11/21 07:31

お世話になります。
現在用語集的なページを作成していて、プラグインのshortcords ultimateのタブであいうえお順に切り替えています。
各用語のboxにアンカーリンクを設置し、デフォルトで開いているタブにはうまく飛べるのですが、別タブへのリンクが希望通りに飛べずデフォルトで開いているページに飛んでしまいます。
該当するタブへ飛ばすにはどうしたらよいでしょうか?

【追記1】
不親切な書き方で大変申し訳ございません。
HTMLを記載させていただきます。

HTML

1[su_tabs active="1"] ...ひとつめのタブがデフォルトで表示される設定 2 [su_tab title="A"] ...Aから始まる用語が格納されたタブ 3 <a id="tab-a-1"> ...各用語にアンカーリンクを設置 4 <dl> 5 <dt>Apple</dt> 6 <dd>appleについての説明文</dd> 7 <dl> 8 </a> 9 10 <a id="tab-a-2"> 11 <dl> 12 <dt>Art</dt> 13 <dd>artについての説明文</dd> 14 <dl> 15 </a> 16 ... 17 [/su_tab] 18 19 [su_tab title="B"] 20 <a id="tab-b-1"> ←ここに飛ばしたい場合の方法を知りたい 21 <dl> 22 <dt>Bee</dt> 23 <dd>beeについての説明文</dd> 24 <dl> 25 </a> 26 ... 27 [/su_tab] 28[su_tabs]

<a href="URL/#tab-a-1">Apple</a>
で飛ばした場合は目的の箇所に飛びますが、

<a href="URL/#tab-b-1">Bee</a>
の場合はAppleに飛んでしまいます。
Beeに飛ばす方法が知りたいです。

よろしくお願いいたします。

【追記2】
javascriptでコントロールする必要があるとご回答をいただきました。
jsには明るくないのでお知恵をお借りしたく思います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

出先で試す環境がないので、ドキュメントとサンプルを見ての回答ですが...

<a href="URL/#tab-b-1">Bee</a>

の場合はAppleに飛んでしまいます。

Apple に飛んでいるというのは、どのように確認したのでしょうか?
画面の見た目でしょうか?


Shortcodes Ultimate プラグインのタブ切り替え機能は、class に su-tabs-pane-open がついているタブが画面に表示される様になっています。

そのため、おそらく指定された ID にはジャンプしていますが、タブが切り替わらずに表示しているタブのままになっているため、画面では別の箇所にジャンプしたように見えていると思います。

アンカーをクリックして、別のタブにジャンプする場合は、現在表示しているタブの class から su-tabs-pane-open を削除して、表示したいタブの class に su-tabs-pane-open を付加するような JavaScript を用意する必要があるのではないかと思います。

投稿2020/11/20 04:12

CHERRY

総合スコア25218

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mmarie

2020/11/20 05:59

ご回答ありがとうございます。 >Apple に飛んでいるというのは、どのように確認したのでしょうか? はい、画面の見た目での確認でした。 Javascriptが必要なのですね…。 私jsの知識がないので、差支えなければ教えていただけませんでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問