jQuery在选项卡式内容UL LI列表内嵌套LI元素

Question

我正在使用页面上的选项卡式内容（“ 查看我的内容” ）

现在，选项卡式内容使用<ul><li>元素来显示不同的选项卡。 在这些选项卡之一中，我想添加一个<ul><li>列表，但是该列表未正确显示，我怀疑是因为：

1. jQuery正在影响它
2. 它嵌套在另一个li元素内

知道我该如何解决吗？

请看小提琴以完全理解我的问题

Answer 1

影响li的样式定义为影响#tabs容器中所有li的样式。 您可以将直接后代选择器（>）添加到选项卡式菜单的css样式中，以使这些样式不会影响其他li的样式。

 ul#tabs {
     list-style-type: none;
     padding: 0;
     text-align: center;
 }
 ul#tabs>li {
     display: inline-block;
     background-color: #32c896;
     border-bottom: solid 5px #238b68;
     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;
 }

Answer 2

您可以使用>子选择器来优化选择器，使其仅匹配<ul id="tab">下的<li>元素：

 ul#tab > li {
     display: none;
 }
 ul#tab > li.active {
     display: block;
 }

 $("ul#tab > li:nth-child(" + nthChild + ")").addClass("active");

https://jsfiddle.net/63og0jue/

---

没有> ，选择器将匹配<ul id="tab">任何<li>后代：

<ul id="tab">
    <li><!-- ... --></li>
    <li>
        <!-- ... -->
            <li>one</li>
            <li>Two</li>
            <li>THree</li>
        <!-- ... -->
    </li>
    <li><!-- ... --></li>
</ul>

ul#tab li:nth-child(1) ，例如，将这两个都作为各自父母的第一个孩子进行匹配：

<li>one</li>

<li>
    <p>HI There Enter personal Info</p>
</li>