jQuery自动选择菜单项。

Question

Hi i am trying to select navigation item once user click on them and they should remain selected once page load up. I have tried many examples and none is working for me.

Here is what i have in header.

<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>

And here is what i have in script.js. Script is added in all files.

last one i tried

$(document).ready(function(){


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

Than tried this

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

Nothing seems to work.

Answer 1

this is ypur mark up

<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>

then
get the file name

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

then by jquery find the anchor tag

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

hope this would help you

Answer 2

For your current html markup, this is the code you'll need in order to achieve the kind of effect you are looking for.

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

You can see this here: http://jsfiddle.net/V5XhN/

Hope this helps!!!