Question

我有一个像这样的HTML代码：

<ul>
    <li class="curent"><a href="home.html">Home</a></li>
    <li>
        <a href="javascript:void(0)">Products</a>
        <ul class="sub">
           <li><a href="samsung.html">Samsung</a></li>
           <li><a href="lenovo.html">Lenovo</a></li>
         </ul>
    </li>
    <li><a href="catalog_grid.html">News</a></li>
</ul>

http://img38.imageshack.us/img38/5795/70a.png

我想点击任何一个标签，li标签的父级是高亮显示的。我尝试使用此代码，但它不能与ul中的标记一起使用子类：

var this_url = window.location.href;

$('#block_nav_primary ul li').each(function() {
    if ($(this).children().attr('href') == this_url) {
        $('#block_nav_primary ul').find('li[class="curent"]').removeClass('curent');
        $(this).addClass('curent');
    }
});

有人能指出我在正确的方向吗？

感谢您的帮助！

P / S：它看起来像这个帖子Highlight Parent Link in Navigation Menu With Jquery

Answer 1

试试这个：

$("ul a").click(function () {
    $(this).parent().parent().addClass("blue");
});

或

$("ul a").click(function () {
    $(this).closest("ul").addClass("blue");
});

两种情况下的CSS：

.blue > a {
   color: blue;
}

JSFiddle非常相似的情况。

Answer 2

我不确定我是否理解你的措辞，但你想对所有LI标签应用相同的效果，包括子列表中的标签？

替换它：

$('#block_nav_primary ul li').each(function() {

有了这个：

$('#block_nav_primary ul').find('li').each(function() {

Answer 3

尝试

val items = $('#block_nav_primary ul li').click(function(){
    items.filter('.current').removeClass('current');
    $(this).addClass('current')
})

Answer 4

为什么不尝试设置样式，以使A标记占据整个LI标记的宽度，因此当您点击A标记时，它会突出显示整个内容。它的CSS代码类似于：

li a {display: block; width: 100%; padding: 10px 0; background-color: pink;}
li a:hover {background-color: orange;}

jQuery - 单击子元素但突出显示父元素？

4 个答案: