1

次の HTML の問題があります。

説明

私は「著者」ページを作成しており、各著者にはタブ付きのシステムがあります。1 つのタブには略歴があり、もう 1 つのタブにはその他の情報があります。

HTML コード:

<div class="author-container"><img src="author-1.jpg" alt="">
  <ul>
    <li><a href="#inner-tab1">Bio</a></li>
    <li><a href="#inner-tab2">Other Info</a></li>
  </ul>
  <div id="inner-tab1">Bio copy</div>
  <div id="inner-tab2">Other Info copy</div>
</div>

<div class="author-container"><img src="author-2.jpg" alt="">
  <ul>
    <li><a href="#inner-tab1">Bio</a></li>
    <li><a href="#inner-tab2">Other Info</a></li>
  </ul>
  <div id="inner-tab1">Bio copy</div>
  <div id="inner-tab2">Other Info copy</div>
</div>

<div class="author-container"><img src="author-3.jpg" alt="">
  <ul>
    <li><a href="#inner-tab1">Bio</a></li>
    <li><a href="#inner-tab2">Other Info</a></li>
  </ul>
  <div id="inner-tab1">Bio copy</div>
  <div id="inner-tab2">Other Info copy</div>
</div>

はい、問題を検出しました: ID の重複 ( inner-tab1とinner-tab2 )

タブは実際には正常に機能し、これらの重複した ID をそのままにしておくこともできますが、これが正しい方法ではないことはわかっています。

質問

だから私の質問は:idタグを置き換えることができる別の HTML 属性はありますが、それでもタブは機能しますか?

追加情報

タブを作成するには、jQueryUI フレームワークを使用しています。そのフレームワークはid、特定のタブを表示するコンテナーで使用します。

前もって感謝します。

4

2 に答える 2

2

クラス名を使用し、idsにauthor-containersを付けます。次に、で要素を選択できます$("#joe .inner-tab-2")。

于 2012-06-21T19:15:43.787 に答える
0

これはすでにそのまま実装されていますが、唯一の解決策は、ID に基づいていない単純なタブ システムを使用することでした。

残念ながら、私はより単純なタブを実装することができず、弾丸を噛んでマークアップに重複した ID を残さなければなりませんでした。それは機能しますが、理想からは程遠いです。

学んだ教訓。

これらのタブは、使用するのに適切なものでした: http://nuevvo.com/labs/simpletabs/

ご意見をお寄せいただきありがとうございます。

于 2012-08-15T16:34:59.690 に答える