1

我正在构建一个小菜单，如果当前正在查看子菜单项，我需要 jQuery 的帮助来添加或替换菜单项的类。

<div id="menu">    
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="page.html">Page</a>
            <ul>
                <li><a href="sub-page-1.html">Page 1</a></li>
                <li><a href="sub-page-2.html">Page 2</a></li>
                <li><a href="sub-page-3.html">Page 3</a></li>
            </ul>
          </li>
    </ul>
</div>

因此，基本上，如果当前查看了子菜单项（ul li ul li），我必须向其父菜单项（ul li）添加一个类。

我在网站上发现了一个类似的问题，但不包括子菜单部分，我对 jQuery 一无所知。

jQuery.noConflict();
jQuery(document).ready(function() {
   jQuery('ul#menuHov a[href$="' + window.location.pathname + '"]').addClass("menuHov"); 
});

非常感谢提前

4

6 回答 6

3

尝试这个 ：

jQuery.noConflict();
jQuery(document).ready(function() {
   jQuery('li a[href$="' + window.location.pathname + '"]').parent('li').addClass("menuHov"); 
});
于 2012-11-15T11:39:13.957 回答
1 
jQuery(document).ready(function() {
   jQuery('li a[href$="' + window.location.pathname + '"]').parent().parent().parent().addClass("yourclassname"); 
});

也可以定义#menu ul li ul li a

jQuery(document).ready(function() {
   jQuery('#menu ul li ul li a[href$="' + window.location.pathname + '"]').parent().parent().parent().addClass("yourclassname"); 
});
于 2012-11-15T13:23:16.810 回答
1 
document).ready(function() {
   $('li a').addClass("menuHov");
 var lastVisited =  document.referrer;//it can return last url
   $('li ul li a').find('href='+lastVisited).addClass("className");  
});
于 2012-11-15T11:38:35.330 回答
1

如果您只想将类添加到具有子菜单项的父项（页面加载时），您可以简单地执行以下操作：

$('ul li ul').parent().addClass('children-viewed');

如果要在子菜单项悬停时添加类，可以执行以下操作：

$('ul li ul li').hover(function(){
    $(this).parent().parent().addClass('viewed');
},function(){
    $(this).parent().parent().removeClass('viewed');
});

如果要在显示子菜单项时添加类（例如，当悬停其父项时），您可以执行以下操作：

$('ul li').hover(function(){
    $(this).addClass('viewed');
    // show sub-menu items
},function(){
    $(this).removeClass('viewed');
    // hide sub-menu items
});

如果“当前查看”是指其他意思，请解释您的意思。

PS：对不起我的英语不好。

编辑：

现在我明白了 ：） 。然后你可以这样做：

$('ul li ul li').each(function(){
    var rx = new RegExp($(this).children('a').attr('href')+"$");
    if(rx.test(window.location.pathname)){
        $(this).parent().parent().addClass("menuHov");
    }
});

或者，如果您不喜欢循环：

var curr_url = window.location.pathname;
var currently_viewed = curr_url.substr(curr_url.lastIndexOf("/")+1);
$('ul li ul li a[href$="'+currently_viewed+'"]').parent().parent().parent().addClass("menuHov");
于 2012-11-15T12:15:58.313 回答
0

你可以使用jQuery .is()函数。尝试类似的东西

$('ul li ul li').is('.open')

并通过使用将.open类标识符添加到ul li ul li悬停时addClass('.open')

更多信息在这里

于 2012-11-15T11:59:22.987 回答
0

如果你有例子$_GET['page']=="food"

您将使用类似这样的内容检查 url

function getUrlVars() {
   var vars = {};
   var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, 
   function(m,key,value) {
   vars[key] = value;
   });
   return vars;
}

然后你可以在菜单项上有一个 ID

<li id="food">Food</li>

然后如何获取页面。

var page = getUrlVars()["page"];

if (page){
    var currPage = $("#"+page);
    currPage.css({"background":"#eeeeee","color":"#000000"});

}else{
    console.log("No page defined!");
}
于 2012-11-15T13:07:23.290 回答