How to add a CSS class depending on URL path?

Question

How can I add an CSS class to an div depending on what path I am on, including that it should not mather if I had # in it?

<div class="popup">
    <ul>
        <li><a href="#vs">Example 1</a></li>
        <li><a href="#bod">Example 2</a></li>
        <li><a href="#ptf">Example 3</a></li>
    </ul>
</div><!-- popup -->

<!-- how would I add the class addMe with javascript depending on the site path? It has to work with # -->

jsfiddle.net/zatox50/wBxkj/

Example index.html

give some examples of URLs and tell your criteria to get the class name. — Jitendra Pancholi
– Jitendra Pancholi, Commented Oct 14, 2013 at 7:48
Is this what you mean? $($(this).attr('href')).addClass('addMe'); (using jquery). — Mr_Green
– Mr_Green, Commented Oct 14, 2013 at 7:50
Maybe this is usefull paulund.co.uk/use-jquery-to-highlight-active-menu-item ?? — GreyRoofPigeon
– GreyRoofPigeon, Commented Oct 14, 2013 at 7:51
@Mr_Green It looks like what I need, could you fork my fiddle and show it in use there? — Niklas
– Niklas, Commented Oct 14, 2013 at 7:56

GreyRoofPigeon · Accepted Answer · 2013-10-14 07:51:58Z

5

jQuery(function($){
   switch(window.location.hash){
      case "vs":  $(".popup").addClass("class1"); break;
      case "bod":  $(".popup").addClass("class2"); break;
      case "ptf":  $(".popup").addClass("class3"); break;
   }
});

edited Oct 14, 2013 at 7:51

GreyRoofPigeon

18.1k5 gold badges39 silver badges60 bronze badges

answered Oct 14, 2013 at 7:50

Eternal1

5,6253 gold badges34 silver badges48 bronze badges

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

3 Comments

Niklas Over a year ago

I can't get it to work, what should stand in after the "case" if I dont use an anker? Example if I use /index.html.

Eternal1 Over a year ago

then use switch(window.location.href)

Niklas Over a year ago

I can't get it to work, I use this.

jQuery(function($){ 			   switch(window.location.href){ 				  case "index.html":  $(".popup.").addClass("addMe"); break; 			   } 			});

user1688793 · Accepted Answer · 2013-11-28 13:30:02Z

0

none of these worked for me. this works:

<script type="text/javascript">
    jQuery(document).ready(function($){
        // Get current url
        // Select an a element that has the matching href and apply a class of 'active'.     Also prepend a - to the content of the link
        var url = window.location.href;
        $('.menu a[href="'+url+'"]').addClass('active');
    });
</script>

menu structure:

<div class="menu">
    <a href="#" class="menu-element">001</a>
    <a href="#" class="menu-element">002</a>
</div>

source: http://www.paulund.co.uk/use-jquery-to-highlight-active-menu-item

answered Nov 28, 2013 at 13:30

user1688793

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

This is the simple code for create Dynamic active menu for website by using JavaScript & JQuery.

<style>
.myactive{
     background-color:#F7A751;
    }
    </style>

<script type="text/javascript">
$(function () {
var url = window.location.pathname; 
var activePage = url.substring(url.lastIndexOf('/') + 1);
    activePage === '' ?  $('#home').addClass("myactive") : $('#home').removeClass("myactive") ; // for active index page
    activePage === 'about-us' ? $('#about').addClass("myactive") : $('#about').removeClass("myactive") ; //active about us 
    activePage === 'who-we-are' ? $('#info').addClass("myactive") : 
    $('#info').removeClass("myactive") ; 
});
</script>  

#HTML Part....
 <li id="home"><a href="#">Home</a></li>
 <li id="about"><a href="#">About</a></li>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 7, 2016 at 17:31

Aman Kumar

4,5573 gold badges21 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to add a CSS class depending on URL path?

3 Answers 3

3 Comments

Comments

This is the simple code for create Dynamic active menu for website by using JavaScript & JQuery.

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

This is the simple code for create Dynamic active menu for website by using JavaScript & JQuery.

Comments

Your Answer

Sign up or log in

Post as a guest

Related