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>