Question

您好我想在用户点击它们时选择导航项目，并且一旦页面加载它们应该保持选中状态。我尝试过很多例子，没有人为我工作。

以下是我在标题中的内容。

<nav id="navigation">

<ul id = "nav-ul">
        <li><a href="<?php echo $this->base?>/Logins/index">item1</a></li>
        <li> <a href="<?php echo $this->base?>/Logins/item2">item2</a></li>
        <li><a href="<?php echo $this->base?>/Logins/item3">item3</a></li>

</ul>

    </nav>

这就是我在script.js中所拥有的。脚本将添加到所有文件中。

我试过的最后一次

$(document).ready(function(){


    $('#navigation ul li a').each(function(index) {
        if(this.href.trim() == window.location)
            $(this).addClass("selected");
    });
});

比试过这个

$(document).ready(function(){

    var pgurl = window.location.href.substr(window.location.href
        .lastIndexOf("/")+1);
    $("#navigation ul li a").each(function(){
        if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
            $(this).addClass("active");
        $("#navigation ul li a").selected
    })
});

似乎没什么用。

Answer 1

这是你的标记

<ul id = "nav-ul">
    <li><a href="<?php echo $this->base?>/Logins/index"    >item1</a></li>
    <li> <a href="<?php echo $this->base?>/Logins/item2"      >item2</a></li>
    <li><a href="<?php echo $this->base?>/Logins/item3"      >item3</a></li>

然后<是/> 获取文件名

filename = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);

然后通过jquery找到锚标记

$("a[href$="+filename +"]").addClass("selected")

希望这会对你有所帮助

Answer 2

对于您当前的html标记，这是您需要的代码，以实现您正在寻找的那种效果。

CSS：

ul li {
    list-style-type:none;
    margin-bottom:10px;
}

a {
    color:Orange;
    font-size:18px;
    font-weight:bold;
}

.active {
    color:red;
}

jQuery的：

$(document).ready(function () {
    $("a").click(function (event) {
        $('#navigation ul li a').each(function (index) {
            $(this).removeClass("active");
        });
        $(event.target).addClass("active");
    });
});

您可以在此处看到：http://jsfiddle.net/V5XhN/

希望这有帮助!!!

Jquery自动选择菜单项。

2 个答案: