javascript - jsp ul列表元素动态选择

标签 javascript css html-lists

<分区>

情况是这样的: 我的导航栏中有一个嵌套的 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/

上一篇:asp.net - 如何将个人样式添加到主(site.css)css 文件?

下一篇:asp.net - 可以将个人样式添加到 master css 文件中吗?

相关文章:

javascript - 单击事件不适用于由 JS 生成的按钮

html - Doctype 导致底部边距显示在图像下方

html - 在 <li> 上扩展背景图像

CSS 框/ul 菜单

jquery - jcarousel 具有 100% li 项目宽度?

javascript - 没有 iframe 的 Backbone 沙箱

Javascript读取txt文件中的特定行并为其分配一个id

javascript - 如何在 react-native 中使用 zIndex

javascript - 使 child 的高度大于 parent

javascript - 修复了滚动上的导航栏