Jeeten Parmar
Jeeten Parmar

Reputation: 5757

Remove and Add Attribute id using jQuery

I have menu in my website and I want to Remove and Add Attribute id using jQuery based on Different Pages.

My Code :

<ul id="nav">
    <li id="current"><a href="">Users</a></li>
    <li><a href="Category.aspx">Category</a></li>
    <li><a href="SubCategory.aspx">SubCategory</a></li>
    <li><a href="Area.aspx">Area</a></li>
    <li><a href="Feedbacks.aspx">Feedbacks</a></li>
</ul>

Here, on Home Page, id 'current' is set to first li. Now, when user visits Category, I want to remove id current from Users and set id to Category.

How to do this ?

Upvotes: 1

Views: 1705

Answers (6)

Try

$(document).ready(function () {
    $('li#current').removeAttr("id"); //remove previously added id
    var loc = $(location).attr('href'); //get current location
    $('#nav a').filter(function () { //filter a tag 
        return this.href == loc;//whose link is pointing to current location
    }).parent().attr('id', 'current'); //add id to parent li
});

Upvotes: 2

Ryan
Ryan

Reputation: 14649

switch(window.location.pathname) {
    case 'Category.aspx':
        $("#nav").find('#current').attr('id','');
        $('#nav').find('a[href="Category.aspx"]').attr('id', 'current');
    break;
    case 'SubCategory.aspx':
        $("#nav").find('#current').attr('id','');
        $('#nav').find('a[href="SubCategory.aspx"]').attr('id', 'current');
    break;
    case 'Area.aspx':
        $("#nav").find('#current').attr('id','');
        $('#nav').find('a[href="Area.aspx"]').attr('id', 'current');
    break;
    case 'Feedbacks.aspx':
        $("#nav").find('#current').attr('id','');
        $('#nav').find('a[href="Feedbacks.aspx"]').attr('id', 'current');
    break;

}

Upvotes: 0

ReNiSh AR
ReNiSh AR

Reputation: 2852

Use this,

$('#nav li').click(function(){
  $('#current').removeAttr('id');
  $(this).attr('id','current');
}

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

$('#nav li').click(function() {
        $('li#current').removeAttr("id");
        $(this).attr('id' , 'current');
});

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Try this:

//$('#nav li').each(function(){
    $('#current').removeAttr('id');
    $('li:active').attr('id','current');
//}

Upvotes: 0

Chankey Pathak
Chankey Pathak

Reputation: 21666

$('li').click(function(e) {
        e.preventDefault();
        $('li').removeAttr('id');
        $(this).attr('id','current');
    });

Demo

Upvotes: 0

Related Questions