Question

我正在构建一个小菜单，如果当前查看了一个子菜单项，我需要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"); 
});

提前多多感谢

Answer 1

试试这个：

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

Answer 2

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

Answer 3

如果您只想将类添加到包含子菜单项的父项（一次加载页面），您只需执行以下操作：

$('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");

Answer 4

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

Answer 5

您可以使用jQuery .is()功能。尝试类似的东西

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

使用.open

悬停时，将ul li ul li类标识添加到addClass('.open')

更多信息Here

Answer 6

如果您有示例$_GET['page']=="food"

您将使用类似的内容检入网址

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!");
}

如果href = url更改/将类添加到父元素

6 个答案: