CODEWITHSUNDEEP
javascriptjquerycssdynamic
Max
Max

Reputation: 73

Changing CSS for link of current page with jQuery

New coder here and would really appreciate your help with a problem that's got me stumped.

I'd like to write code that will recognize the link that applies to the current page and applies a different CSS style to that current link. I've researched this problem and have found that it's best accomplished using jQuery to identify the current link and then apply a new class to it (e.g., ".current"). However, when I've tried to implement this on the site it hasn't worked.

This is the HTML I'm working with:

<nav class="main-nav">
   <a href="http://website.com" class="main-nav-link">
      <span class="main-nav-item" id="nav-content"></span>
   </a>
   <a href="http://website.com/calendar" class="main-nav-link">
      <span class="main-nav-item" id="nav-calendar"></span>
   </a>
   <a href="http://website.com/profile" class="main-nav-link">
      <span class="main-nav-item" id="nav-profile"></span>
   </a>
</nav>

And this is the CSS I've applied:

.main-nav .main-nav-item {
  height: 50px;
  width: 150px;
}

.main-nav #nav-content {
  background: url('/images/content-inactive.png') no-repeat center;
}

.main-nav #nav-calendar {
  background: url('/images/calendar-inactive.png') no-repeat center;
}

.main-nav #nav-profile {
  background: url('/images/profile-inactive.png') no-repeat center;
}

My goal is to change the background: for the span within the current page's <a>.

Here are some other StackOverflow threads that have addressed this problem, but haven't helped me to reach a solution:

It's not completely clear to me where I'm supposed to be putting the Javascript, but I currently have it between <script type="text/javascript"> and </script> in the <header> section.

Thanks in advance for your assistance. :)

--

UPDATE:

I currently have the following code in the page, but it's not working.

The Javascript:

<script>

      $(document).ready(function() {

     // Get the current URL
            var currentUrl = window.location.href;

            // Get the span you want with a combination class and attribute and child jQuery selector
            var currentMenuItem = $(".main-nav-link[href='" + currentUrl + "'] > .main-nav-item");

            // Then add your class
            currentMenuItem.addClass("current");

        });

</script>

And the CSS:

#nav-content.current {
  background: url('/images/content-active.png') no-repeat center -94px;
}

The jQuery isn't adding the .current class to the active link, so the CSS doesn't even have the opportunity to work.

Upvotes: 3

Views: 14344

Answers (3)

tymeJV
tymeJV

Reputation: 104775

Inside your script page tags you can use the following:

$(document).ready(function() {
    var currentPage = "content"; // <--Change this to the id of your span after the nav-

    //Change the background color now
    $("#nav-" + currentPage).addClass("className");
});

Upvotes: 1

davidtheclark
davidtheclark

Reputation: 4676

window.location.href will get your current URL. Then you need to use a jQuery selector that finds the <span class="main-nav-item"> child of the <a class="main-nav-link"> element with that href attribute. Apply your class "current" to that element, and you should be good to go. So how about this JavaScript:

// Get the current URL
var currentUrl = window.location.href;

// Get the span you want with a combination class and attribute and child jQuery selector
var currentMenuItem = $(".main-nav-link[href='" + currentUrl + "'] > .main-nav-item");

// Then add your class
currentMenuItem.addClass("current");

Put that in your script tags and give it a try.

Once you have it working, make sure you add the proper CSS rules. For example, add a rule that loads a different background image for #nav-content.current (and another all the rest).

(A note about your current CSS: It looks like you're overqualifying your selectors. If you don't have to worry about .main-nav-items anywhere else on the page, don't bother qualifying that class with the .main-nav before it. And your id selectors (e.g. #nav-content) certainly don't need to be qualified, since they're unique identifiers.)

Hope that makes sense to you and helps.

Upvotes: 2

Jules Colle
Jules Colle

Reputation: 11939

The common way to do this, is to add a class like "active" to your active page-link server side. You could then style the element with jQuery like so:

$('.active').css('background-image','images/activebg.png');

But as you mentioned, you would need a different background for each "active" element, and you want to use the link. (I suppose you mean the URL).

You can get the current page's URL like this:

var current_url = window.location.href;

You can then select the link with the current URL like this:

var $link = $('.main-nav a[href='+current_url +']');

So now you can set the background active for the current page link like this:

$link.css('background-image','images/activebg.png');

Now, if you have a custom active background for each link, I would suggest you create your own attribute hover_img or something in which you provide the hover url:

<a href="http://website.com" class="main-nav-link" hover_img="/images/hover-home.png" > ....
<a href="http://website.com/calendar" class="main-nav-link calendar" hover_img="/images/hover-calendar.png"> ....

and so on.

Then, you can change my last line of code to:

$link.css('background-image',$link.attr('hover_img'));

Upvotes: 2

Related Questions