0

我是 jQuery 和 JS 的新手，并试图弄清楚是否可以从基本的无序列表创建简单的选项卡。我有以下动态生成的 HTML（我无法更改列表标记，但可以插入按钮标记）。

我读过的所有选项卡教程都只讨论了对按钮使用无序列表，对选项卡本身使用 div。li是否可以使用 parent s 作为选项卡并使用 s 作为按钮以相反的方式执行此操作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 回答