Question

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

我读过的所有标签教程都只讨论了标签本身的按钮和div的无序列表。是否有可能以相反的方式使用父li s作为选项卡，div s作为按钮？

<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>

Answer 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();
});

jQuery：是否可以从常规列表创建选项卡？

1 个答案: