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

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

选项卡1
表2
表3


标题1

项目
项目
项目



标题2

项目
项目
项目



标题3

项目
项目
项目

HTML

Javascript（jQuery）

---

是的，这是可能的。大多数选项卡库允许您指定要使用的选择器。如果您在问题中添加特定选项卡库/插件的名称，您可能会得到更详细的回答。您想用谷歌搜索“”。简短回答，是的@Mike我只是在用jqueryOr你是说下拉列表而不是标签吗？这个问题有点模糊。哎呀，我把我的HTML搞乱了，已经改正了。。。我需要选项卡，即我需要在顶部有三个按钮，第一个父列表需要显示，其他两个需要隐藏。单击按钮2时，列表1需要滑出视图，列表2需要将其替换。当单击按钮3时，列表3也是如此。下拉列表不是悬停事件，而是单击事件？是的，它需要几乎完全像这样工作：除了按钮可以单独浮动在选项卡上方之外。我终于明白了，我已经更新了答案以提供该功能。我认为div方法可以更干净，但我理解可能存在不利的边界。

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

.tab {
  display: inline-block;
}

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

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

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

$('.tab').click(function (e) {
  e.preventDefault();
  var current_tab = tabs.eq($(this).index()).show();
  tabs.not(current_tab).hide();
});