JSP ul列表元素动态选择

jsp ul list element dynamic selection

本文关键字：选择 动态 列表元素 ul JSP      更新时间：2023-09-26

情况如下:我有一个嵌套的ul列表在我的导航栏ie

<li>
<ul>
<li>
 Some link
</li>
</ul>
</li>
</ul>

这是我的磁贴左边的导航栏，右边是与它相关的内容。

所以我想要一个特定的li(主的不是嵌套的)在我选择一个嵌套的li时打开。如何做到这一点，无论如何CSS或javascript。

PS:我是一个新手web开发人员，所以请建议简单的解决方案，有可能这个问题已经问过了，但我找不到一个简单的答案，所以请不要评价它低。由于

如果您想在单击时显示它，您可以使用CSS伪Element:target。这就是你要做的:

你的HTML标记:(给每个父LI一个唯一的ID和一个元素在这个元素的锚)

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

我做了一个小提琴作为示范

相关文章：