jquery,将活动类添加到链接

时间:2015-01-11 12:20:52

标签: javascript jquery css menu addclass

您好我正在处理一个非画布菜单,我想添加一个类来突出显示活动菜单项,但我正在使用的jquery代码似乎没有将该类添加到活动链接。我尝试了网络上遇到的所有可能的解决方案,似乎没有任何效果。有什么建议,想法,资源吗?

<nav class="site-menu">
       <div class="menu-list"> 
        <ul>
            <li><a href="portfolio.php">portfolio</a></li>
            <li><a href="projects.php">projects</a></li>
            <li><a href="process.php">process</a></li>
            <li><a href="blog.php">blog</a></li>
            <li><a href="contact.php">contact</a></li>
        </ul>
        </div>
    </nav>

CSS

 .site-menu ul {
    list-style: none;
    padding: 20px;
    margin: 0;
}

.site-menu ul li a {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #7f7f7f;
    background: transparent;
    text-decoration:none;
}

.menu-list{
    position: absolute;
    top: 80px;
    margin-left: 10px;
    font-family: 'Open Sans',     sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px; 
    text-align: left;
     }

.active {
    color:#fff;
}

脚本

var selector = ".site-menu li";

$(selector).click(function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

4 个答案:

答案 0 :(得分:3)

您需要使CSS选择器更具体:

.site-menu ul li.active a {
    color: #fff;
}

否则规则.site-menu ul li a具有更高的优先级。

阅读主题:CSS Specificity: Things You Should Know

演示:http://jsfiddle.net/6ck1Lg0w/

答案 1 :(得分:0)

试试这个:

var selector = ".site-menu li";

selector.click(function(){
    selector.removeClass('active');
    $(this).addClass('active');
});

答案 2 :(得分:0)

您必须将选择器更改为以下选择器:

var selector = ".site-menu ul li a";

答案 3 :(得分:0)

当您加载新页面时,javascript更改将会丢失。但是,您可以在加载页面时查看active页面是这样的:

JS

(function($){
    $('.site-menu li a').each(function(){
        if( $(this).attr('href') == window.location.pathname ) $(this).addClass('active');
    })
})