How to highlight the selected tab?

Question

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.com/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>

what are your expectations with regard to url matching? Will hash that matches href be in url? — charlietfl, Oct 22 '14 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
that's what I expected, so use `location.hash` and match the href that way — charlietfl, Oct 23 '14 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, Oct 23 '14 at 14:53
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, Oct 23 '14 at 14:55
@charlietfl , Thanks. Your suggestions helped. Also , thanks to the forum I found a useful [link](http://stackoverflow.com/questions/19491336/get-url-parameter-jquery) related to this issue. — chidori, Oct 23 '14 at 15:13

score 4 · Accepted Answer · edited Oct 22 '14 at 20:34

4

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.com/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>

edited Oct 22 '14 at 20:34

Lee Taylor

7,761
16
33
49

answered Oct 22 '14 at 16:52

just some guy

524
1
4
18

Rather than linking to a fiddle, why not use a code-snippet? – Lee Taylor Oct 22 '14 at 18:16
@LeeTaylor i have no idea how to make one. I'm having enough trouble trying to post code as it is. And fiddle is much easier and faster. – just some guy Oct 22 '14 at 18:54
got'cha! I never noticed the code snippet icon over there. thanks! – just some guy Oct 22 '14 at 20:37

score 1 · Answer 2 · 2014-10-22T17:18:35.313

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.net/scriptonic/pgw8qq9a/3/

score 1 · Answer 3 · answered Oct 22 '14 at 17:35

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

jroot · Answer 4 · 2014-10-22T17:55:29.523

This is pretty much the same as another (just some guy, I would have just added a comment, 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.net/pgw8qq9a/9/

score 0 · Answer 5 · answered Mar 17 '17 at 09:17

$(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.com/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>

score -1 · Answer 6 · answered Oct 22 '14 at 16:53

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

How to highlight the selected tab?

6 Answers6