0

我有一个这样的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

我想单击任何 a 标签，并突出显示 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

4

4 回答 4

1

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

li a {display: block; width: 100%; padding: 10px 0; background-color: pink;}
li a:hover {background-color: orange;}
于 2013-07-04T08:41:23.260 回答
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到一个非常相似的场景。

于 2013-07-04T08:22:58.553 回答
1

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

替换这个：

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

有了这个：

$('#block_nav_primary ul').find('li').each(function() {
于 2013-07-04T08:23:43.957 回答
1

尝试

val items = $('#block_nav_primary ul li').click(function(){
    items.filter('.current').removeClass('current');
    $(this).addClass('current')
})
于 2013-07-04T08:27:12.340 回答