0

私はjQueryとJSが初めてで、基本的な順序付けられていないリストから単純なタブを作成できるかどうかを調べようとしています. 以下の動的に生成された HTML があります (リスト マークアップを変更することはできませんが、ボタン マークアップを挿入することはできます)。

私が読んだすべてのタブのチュートリアルでは、ボタンに順序なしリストを使用し、タブ自体に div を使用することについてのみ説明しています。li親をタブdivに、 をボタンに使用して、逆の方法で行うことは可能ですか?

<div>tab 1</div>
<div>tab 2</div>
<div>tab 3</div>

<ul id="lists">
  <li>
    <h2>Title 1</h2>
    <ul>
      <li>An item</li>
      <li>An item</li>
      <li>An item</li>
    </ul>
  </li>
  <li>
    <h2>Title 2</h2>
    <ul>
      <li>An item</li>
      <li>An item</li>
      <li>An item</li>
    </ul>
  </li>
  <li>
    <h2>Title 3</h2>
    <ul>
      <li>An item</li>
      <li>An item</li>
      <li>An item</li>
    </ul>
  </li>
</ul>
4

1 に答える 1

1

HTML

<div class="tab">tab 1</div>
<div class="tab">tab 2</div>
<div class="tab">tab 3</div>

<ul id="lists">
<li>
  <ul>
    <li><h2>Title 1</h2></li>
    <li>An item</li>
    <li>An item</li>
    <li>An item</li>
  </ul>
</li>
<li>
  <ul>
    <li><h2>Title 2</h2></li>
    <li>An item</li>
    <li>An item</li>
    <li>An item</li>
  </ul>
</li>
<li>
  <ul>
    <li><h2>Title 3</h2></li>
    <li>An item</li>
    <li>An item</li>
    <li>An item</li>
  </ul>
</li>
</ul>

CSS

.tab {
  display: inline-block;
}

#lists {
  margin: none;
  padding: none;
}

#lists > li {
  list-style: none;
  margin: none;
  padding: none;
  display: none;
}

Javascript (jQuery)

var tabs = $('#lists>li');

$('.tab').click(function (e) {
  e.preventDefault();
  var current_tab = tabs.eq($(this).index()).show();
  tabs.not(current_tab).hide();
});
于 2012-12-05T20:25:51.667 に答える