How to apply CSS class to a parent element?

Question

I have the following bootstrap pills on page1.htm:

<div>
   <ul class="nav nav-pills nav-stacked" >
    <li role="presentation" class=""><a href="someurl.htm#apply" class="js-apply">Apply</a></li>
    <li role="presentation" class=""><a href="someurl.html#report" class="js-report">Report</a></li>
    <li role="presentation" class=""><a href="someurl.html#book" class="js-book">Book</a></li>
   </ul>
</div>

on page2.htm I have the following link

<a class="btn btn-default" href="page1.htm#apply" role="button">Apply</a>

When I click the above link to go to page1.htm, how do I extract the anchor id attribute from the url to set list item on page1.htm with the same anchor id attribute to active i.e. the following list tag should become active:

<li role="presentation" class="active"><a href="someurl.htm#apply" >Apply</a></li>

Similarly if I click the following link, I want to set the list item on page1.htm with the same anchor id attribute to active.

<a class="btn btn-default" href="page1.htm#report" role="button">Apply</a>

I use the following to get the hash:

var url = document.location.toString(), idx = url.indexOf("#")
var hash = idx != -1 ? url.substring(idx+1) : "";

Could you include the code do you currently have / tell us where the problem is, specifically? — Jeroen
– Jeroen, Commented Sep 21, 2015 at 16:17
You could check the current URL and if the URL matches one of the links in the nav then set the class to active. — APAD1
– APAD1, Commented Sep 21, 2015 at 16:19

hungerstar · Accepted Answer · 2015-09-29 20:15:09Z

3

You can use window.location.hash to get the ID from the URL. From there loop through the anchors of your unordered list checking the href value for the hash.

This example uses jQuery.

var hash = window.location.hash

$( '.nav-pills a' ).each( function( i, e ) {

    var $a = $( this );

    if ( hash && -1 !== $a.attr( 'href' ).indexOf( hash ) ) {
        $a.parent().addClass( 'active' ); // add class to <li>
    }

} );

Here is a jsFiddle demonstrating the code: http://jsfiddle.net/6dyee7b0/15/

Example Code

HTML

<ul class="nav-pills">
    <li><a href="some-url.html#one">One</a></li>
    <li><a href="some-url.html#two">Two</a></li>
    <li><a href="some-url.html#three">Three</a></li>
    <li><a href="some-url.html#four">Four</a></li>
    <li><a href="some-url.html#five">Five</a></li>
    <li><a href="some-url.html#six">Six</a></li>
</ul>

CSS

.active a {
    color: red;
}

edited Sep 29, 2015 at 20:15

answered Sep 21, 2015 at 16:37

hungerstar

21.8k6 gold badges52 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

adam78 Over a year ago

This is an elegant solution. Thanks.

adam78 Over a year ago

updated code to add class to <li> element: $(this).closest('li').addClass( 'active' );

hungerstar Over a year ago

I'm sorry, I missed that part. I've updated my answer. Please note that it uses parent() instead of closest(). Also updated jsFiddle.

adam78 Over a year ago

If there is no hash all the links end up getting the active class applied. How do you make it so that if there is no hash then the active class doesnt need to get applied?

hungerstar Over a year ago

Nice catch @ozzii, updated answer again. You simply check for a truthy value for hash first, which an empty string is falsy. Then if you have something to work with it can move onto the next check in the statement that finds out if that value is in the href.

Aaron · Accepted Answer · 2015-09-21 16:21:17Z

2

Use js to check the url for a hash, then use that to apply a class to li

if (window.location.hash == "#apply") {
    $("ul.nav-pills li:first-child").addClass("active");
}
if (window.location.hash == "#report") {
    $("ul.nav-pills li:last-child").addClass("active");
}

answered Sep 21, 2015 at 16:21

Aaron

10.5k3 gold badges27 silver badges42 bronze badges

1 Comment

adam78 Over a year ago

what if I have multiple list items, do i have to check every child e.g $("ul.nav-pills li:second-child").addClass("active");

Daniel Beck · Accepted Answer · 2015-09-21 16:37:53Z

0

Since your hashes conveniently match your classes, you can just use the one directly in the other:

var wh = window.location.hash.substr(1); // .substr(1) removes the '#'
if (wh === 'apply' || wh === 'report' || wh === 'book') {
    $('ul.nav-pills li.'+wh).addClass('active');
}

You could probably safely skip the validation step, since worst case you'd add .active to a nonexistent element, but explicit is usually better...

answered Sep 21, 2015 at 16:37

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to apply CSS class to a parent element?

3 Answers 3

Example Code

HTML

CSS

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Example Code

HTML

CSS

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related