I have a set of tabs in html which I want to highlight when selected. I am trying to use jquery to do this. But it does not seem to work.

$(function () {
    setNavigation();
});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);

    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
}

a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:55px;
    float:left;
}
.nav li.active {
    background-color:green;
}
.nav li.active a {
    color:#fff;
    font-weight:bold;
}

<script src=".9.1/jquery.min.js"></script>
<ul class="nav">
        <li><a href="#tab1">tab1</a>
        </li>
        <li>|</li>
        <li><a href="#tab2">tab2</a>
        </li>
        <li>|</li>
        <li><a href="#tab3">tab3</a>
        </li>
        <li>|</li>
        <li><a href="#tab4">tab4</a>
        </li>
    </ul>

I have a set of tabs in html which I want to highlight when selected. I am trying to use jquery to do this. But it does not seem to work.

$(function () {
    setNavigation();
});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);

    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
}

a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:55px;
    float:left;
}
.nav li.active {
    background-color:green;
}
.nav li.active a {
    color:#fff;
    font-weight:bold;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
        <li><a href="#tab1">tab1</a>
        </li>
        <li>|</li>
        <li><a href="#tab2">tab2</a>
        </li>
        <li>|</li>
        <li><a href="#tab3">tab3</a>
        </li>
        <li>|</li>
        <li><a href="#tab4">tab4</a>
        </li>
    </ul>

• javascript
• jquery
• html
• css

• what are your expectations with regard to url matching? Will hash that matches href be in url? – charlietfl Commented Oct 22, 2014 at 16:54
• Actually , the answers submitted by folks here meets my requirement. But what if I am trying to load this url from each <li> element and the param passed each time is different one and I want to highlight the tab(url) that got loaded. The code given here does not seem to work for that. I want to addClass to li which points to a URL – chidori Commented Oct 23, 2014 at 14:42
• that's what I expected, so use location.hash and match the href that way – charlietfl Commented Oct 23, 2014 at 14:45
• location.hash does not seem to work when I am calling link as url?data=a and sometimes url?data=a;col=1;col2=alpha , where i am interested in knowing only what param data holds . – chidori Commented Oct 23, 2014 at 14:53
• 1 ok, well that's why I asked about the url. Parse location.search then. Can also find numerous posts on how to convert location.search to an object also – charlietfl Commented Oct 23, 2014 at 14:55

6 Answers 6

That is doable with a on click event:

$(document).on("click", 'ul li', function(){
    $('ul li').removeClass('active');
    $(this).addClass('active');
});

a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:55px;
    float:left;
}
.nav li.active {
    background-color:green;
}
.nav li.active a {
    color:#fff;
    font-weight:bold;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
  <li><a href="#tab1">tab1</a>
  </li>
  <li>|</li>
  <li><a href="#tab2">tab2</a>
  </li>
  <li>|</li>
  <li><a href="#tab3">tab3</a>
  </li>
  <li>|</li>
  <li><a href="#tab4">tab4</a>
  </li>
</ul>

Add an operator class which defines which tab is active/clicked.

HTML

<ul class="nav">
    <li><a href="#tab1" class="active">tab1</a>
    </li>
    <li>|</li>
    <li><a href="#tab2">tab2</a>
    </li>
    <li>|</li>
    <li><a href="#tab3">tab3</a>
    </li>
    <li>|</li>
    <li><a href="#tab4">tab4</a>
    </li>
</ul>

Style it in CSS then do a click event in your Javascript/jQuery that looks like follows:

$(document).ready(function(){
    $(".nav").on("click", "li", function(){
        $(".active").removeClass("active");
        $(this).addClass("active");
    })
})

http://jsfiddle/scriptonic/pgw8qq9a/3/

This is all the jQuery/javascript you need:

$('.nav a').click(function() {  // Hook up to the click event on your .nav anchors
    $('.nav li').removeClass('active');  // Clear any existing active <li>'s
    $(this).parent().addClass('active');  // Apply the active class to the <li> parent of the clicked <a>
});

This is pretty much the same as another (just some guy, I would have just added a ment, but I have no reputation points. Negative in fact), but a little more specific to the .nav class, so you're not adding events to all ul li elements, but only to the ones under your .nav class.

You could also do with with on, if your tabs are anything more than static...

$(".nav li a").click(function() {
  $(".nav li").removeClass("active");                                     
  $(this).parent().addClass("active");
});

http://jsfiddle/pgw8qq9a/9/

$(function () {
    setNavigation();
});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);

    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
}

a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:55px;
    float:left;
}
.nav li.active {
    background-color:green;
}
.nav li.active a {
    color:#fff;
    font-weight:bold;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
        <li><a href="#tab1">tab1</a>
        </li>
        <li>|</li>
        <li><a href="#tab2">tab2</a>
        </li>
        <li>|</li>
        <li><a href="#tab3">tab3</a>
        </li>
        <li>|</li>
        <li><a href="#tab4">tab4</a>
        </li>
    </ul>

html:

<ul class="nav">
    <li><a onclick="add_select(this);" href="#tab1">tab1</a>
    </li>
    <li>|</li>
    <li><a onclick="add_select(this);" href="#tab2">tab2</a>
    </li>
    <li>|</li>
    <li><a onclick="add_select(this);" href="#tab3">tab3</a>
    </li>
    <li>|</li>
    <li><a onclick="add_select(this);" href="#tab4">tab4</a>
    </li>
</ul>

jquery:

function add_select(selected_nav){
    $("ul#nav li a").removeClass("active");
    $(selected_nav).addClass("active");
}