如何使列表项显示/隐藏DIV列表或DIV的指定项

How to make a list item show/hide a DIV list or specified items of the DIV?

本文关键字：DIV 列表 何使 显示 隐藏      更新时间：2023-09-26

我有两个列表:

·"源"选择器;·所选来源的"内容";

我需要知道如何把源列表的每个项目变成一个按钮，点击时只显示它的内容，并在选择时保持高亮显示，就像iTunes智能播放列表(例如)。

有可能吗?

您可以这样做(似乎jQuery在这里不能正常工作)。请在您的系统上尝试一下)

这里你可以看到一个jsFiddle 

$(document).ready(function(){
    $("ul#tabs li").click(function(e){
        if (!$(this).hasClass("active")) {
            var tabNum = $(this).index();
            var nthChild = tabNum+1;
            $("ul#tabs li.active").removeClass("active");
            $(this).addClass("active");
            $("ul#tab li.active").removeClass("active");
            $("ul#tab li:nth-child("+nthChild+")").addClass("active");
        }
    });
});
ul#tabs {
  list-style-type: none;
  padding: 0;
  text-align: center;
}
ul#tabs li {
  display: inline-block;
  background-color: #32c896;
  padding: 5px 20px;
  margin-bottom: 4px;
  color: #fff;
  cursor: pointer;
}
ul#tabs li:hover {
  background-color: #238b68;
}
ul#tabs li.active {
  background-color: #238b68;
}
ul#tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul#tab li {
  display: none;
}
ul#tab li.active {
  display: block;
}
<ul id="tabs">
  <li class="active">Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>
<ul id="tab">
  <li class="active">
    <h2>This is the first tab</h2>
  </li>
  <li>
    <h2>This is the second tab</h2>
  </li>
  <li>
    <h2>Tab number three wee hee</h2>
  </li>
</ul>

相关文章：