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

我在我的页面上使用选项卡式内容（）

现在，选项卡式内容使用

元素来显示不同的选项卡。在其中一个选项卡中，我想添加一个

列表，但我怀疑列表显示不正确，因为：

jquery正在影响它

它嵌套在另一个li元素中

你知道我该怎么解决这个问题吗

---

影响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;
 }

您可以使用来优化选择器，以仅匹配紧靠

下的
元素：



如果没有
，选择器将匹配
的任何后代：


嗨，这里输入个人信息



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

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

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

<li>one</li>

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