<分区>
<分区>
情况是这样的: 我的导航栏中有一个嵌套的 ul 列表,即
<li>
<ul>
<li>
Some link
</li>
</ul>
</li>
</ul>
这是我的磁贴左侧的导航栏,右侧是与之相关的内容。
所以我希望在我选择一个嵌套的 li 时打开一个特定的 li(main not nested)。 怎么做,通过任何方式 css 或 javascript。
PS:我是一个 noob web 开发者,所以请提出简单的解决方案,这个问题可能以前有人问过,但我找不到简单的答案,所以请不要给它打低分。 谢谢
最佳答案
如果您想在点击时显示它,您可以使用 CSS 伪元素 :target。这是你基本上必须做的:
您的 HTML 标记:(给每个父 LI 一个唯一的 ID 和该元素 anchor 内的一个元素)
<ul class="menu clearfix">
<li id="a">
<a href="#a">Item 1</a>
<ul class="clearfix">
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
</ul>
</li>
<li id="b">
<a href="#b">Item 2</a>
<ul class="clearfix">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
</ul>
</li>
<li id="c">
<a href="#c">Item 3</a>
<ul class="clearfix">
<li><a href="#">Item 3.1</a></li>
<li><a href="#">Item 3.2</a></li>
</ul>
</li>
</ul>
CSS:
/* basic menu styling */
ul.menu {
position:relative;
}
ul.menu li {
display:block;
position:relative;
float:left;
}
ul.menu a {
display:block;
text-decoration:none;
}
ul.menu > li {
border:1px solid #000;
min-width:100px;
margin-left:-1px;
}
/* set up nested ul's and hide them */
ul.menu > li ul {
display:none;
position:absolute;
width:100%;
top:0;
left:0;
}
/* show them on click */
ul.menu > li:target ul {
display:block;
}
ul.menu > li > ul > li {
float:none;
display:block;
}
我为 demonstration 组装了一个 fiddle .
关于javascript - jsp ul列表元素动态选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15471011/