Question

我正在使用页面上的标签内容（SEE MY FIDDLE）

现在，选项卡式内容使用<ul><li>元素显示不同的标签。在其中一个选项卡中，我想添加一个<ul><li>列表但是我怀疑列表没有正确显示，因为：

jquery正在影响它
它嵌套在另一个li元素

知道如何解决这个问题吗？

please look at fiddle to fully understand my question

Answer 1

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

 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

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

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

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

https://jsfiddle.net/63og0jue/

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

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

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

2 个答案: