CODEWITHSUNDEEP
jqueryhtmlcss
frankcrest
frankcrest

Reputation: 117

How to target a subclass of a class (specially adding and removing this class)

<div class="nav">
  <ul class="active">
    <li><a class="current" href=index.html>About</a></li>
    <li><a href=portfolio.html>Portfolio</a></li>
    <li><a href=essay.html>Essays</a></li>
    <li><a href=resources.html>Resources</a></li>
    <li><a href=research.html>Research</a></li>
    <li id="last"><a href=contact.html>Contact</a></li>
  </ul>
</div>

I have used CSS to make the li tags into a horizontal list and change color when hovered over.

However, I am trying to make the nav bar present the current active link, which means if I am currently on the index.html, I want the "ABOUT" li to be highlighted using the class "current".

And the class current would be applied to the li whenever the page is the current page. After some research, this is the closest thing that I found but it doesn't work. 

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

Below is my CSS for these menu navs.

.nav li {
  display:inline;
  margin-right:25px;
  font-size:13px;
  padding-top:6px;
  font-weight:bold;
}

.active li a {
  display: inline-block;
  border-top-style:solid;
  border-top-color:#8D919E; 
  border-top-width: 6px;
  padding-top: 6px;
}


.nav .current {
  color:#30B7E7;
  border-top-color:#30B7E7;
}

I want to target the .nav .current class somehow and add it to the li and remove it from the last li.

EDIT: I figured out a super dumb way of doing this through html. I applied the class current to the first LI in for the index page, and the rest do not have this class. And then for the second page, I applied class current to that LI, and removed it from the first one. Its a dumb fix but i cant get any of the JS codes to work for some reason.

Upvotes: 0

Views: 3615

Answers (3)

Crystal
Crystal

Reputation: 6160

You can also do it like this:

$('.active li a').on('click', function(e) {
    //prevent the default behaviour of the link 
    //that would have navigated to the next page
    e.preventDefault();
    var currentListEl = $(this).parent("li");//get the a tags parent li
    currentListEl.siblings().removeClass('current');//remove 'current' from its siblings
    currentListEl.addClass('current');//add 'current' to the li

    //navigate to the "current" page or load it with ajax
});

Upvotes: 1

Jay Blanchard
Jay Blanchard

Reputation: 34426

To add a class to the item that matches the page's URL you can do this - 

var url = window.location.pathname;
var currentPage = url.substring(url.lastIndexOf('/')+1);
$('a[href="' + currentPage + '"]').closest('li').addClass('current active'); // adds highlight to current page element

$('li a').on('click', function(e) {
    e.preventDefault();
    var thisHREF = $(this).attr('href');
    $(this).parent().siblings().removeClass('active');
    $('a[href="' + thisHREF + '"]').closest('li').addClass('active');
});

Upvotes: 0

user115014
user115014

Reputation: 922

The jquery is wrong. You're getting a bit lost I think. It should be:

$('.active li').on('click',function() {
    $('.current').removeClass('current');      //<--- Not efficient, but will work
    $(this).children('a').addClass('current'); //<--- You want to add current to a tag?
});

Three mistakes I can see are

  • $document.ready(function(){ has a closing })? It doesn't in your example.
  • Sublings is typo
  • Wrong use of addClass('.nav .current'). You're not targeting CSS selectors you're adding a class

Upvotes: 0

Related Questions