[英]Jquery nested LI elements inside tabbed content UL LI list
Im using tabbed content on my page ( SEE MY FIDDLE ) 我正在使用页面上的选项卡式内容(“ 查看我的内容” )
Now the tabbed content makes use of <ul><li>
elements to display the different tabs. 现在,选项卡式内容使用
<ul><li>
元素来显示不同的选项卡。 Inside one of these tabs I would like to add a <ul><li>
list however the list is not getting displayed correctly I suspect because: 在这些选项卡之一中,我想添加一个
<ul><li>
列表,但是该列表未正确显示,我怀疑是因为:
Any idea how I can fix this? 知道我该如何解决吗?
please look at fiddle to fully understand my question 请看小提琴以完全理解我的问题
The styles affecting the li's are defined as affecting all the li's inside the #tabs container. 影响li的样式定义为影响#tabs容器中所有li的样式。 You can add the direct descendant selector (>) to the css styles fot the tabbed menu so that these styles don't affect other li's
您可以将直接后代选择器(>)添加到选项卡式菜单的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;
}
You can use the >
, child selector to refine the selectors to match only the <li>
elements immediately under <ul id="tab">
: 您可以使用
>
子选择器来优化选择器,使其仅匹配<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/ https://jsfiddle.net/63og0jue/
Without >
, the selectors will match any <li>
descendant of <ul id="tab">
: 没有
>
,选择器将匹配<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)
, for example, matches both of these as the first-child of their respective parents: ul#tab li:nth-child(1)
,例如,将这两个都作为各自父母的第一个孩子进行匹配:
<li>one</li>
<li>
<p>HI There Enter personal Info</p>
</li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.