jQuery - CSS class being applied but not taking effect

Question

I'm applying a CSS class using .addClass when a tab is selected and it is also adding the class to the parents parent tab. The class is being added but the CSS doesn't seem to be taking effect of the parents parent class (apologies if that sounds awkward).

CSS:

.selectedTab{
  color:#234 !important;
  background-color:white !important;
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Visit Northern Ireland</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
    <script src="js/common.js"></script>
    <script src="js/jquery.tools.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/accordion.css">
    <link rel="stylesheet" type="text/css" href="css/armagh.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
  </head>
  <body>
    <div id="centeredPane">
    <nav>
      <ul id="css-tabs">
        <li><a href="#" class="contentLinks selectedTab" name="home">Home</a></li>
        <li><a href="#" name="activities">Activities</a>
          <div class="subnav" id="activitiesLink">
            <a href="#" name="armagh" class="contentLinks">Co. Armagh</a>
            <a href="#" name="antrim" class="contentLinks">Co. Antrim</a>
            <a href="#" name="down" class="contentLinks">Co. Down</a>
            <a href="#" name="fermanagh" class="contentLinks">Co. Fermanagh</a>
            <a href="#" name="londonderry" class="contentLinks">Co. Londonderry</a>
            <a href="#" name="tryone" class="contentLinks">Co. Tyrone</a>
          </div>
        </li>
        <li><a href="#" name="restaurants">Restaurants</a>
          <div class="subnav" id="restaurantLink">
            <a href="#" name="indian" class="contentLinks">Indian</a>
            <a href="#" name="tapas" class="contentLinks">Tapas</a>
            <a href="#" name="american" class="contentLinks">American</a>
            <a href="#" name="italian" class="contentLinks">Italian</a>
          </div>
        </li>
        <li><a href="#" class="contentLinks" name="game">Game</a></li>
      </ul>
    </nav>
    <div class="content" id="home">home</div>
    <div class="content" id="armagh">armagh</div>
    <div class="content" id="antrim">antrim</div>
    <div class="content" id="down">down</div>
    <div class="content" id="fermanagh">fermanagh</div>
    <div class="content" id="londonderry">londonderry</div>
    <div class="content" id="tryone">tyrone</div>
    <div class="content" id="indian">indian</div>
    <div class="content" id="tapas">tapas</div>
    <div class="content" id="american">american</div>
    <div class="content" id="italian">italian</div>
    <div class="content" id="game">game</div>
    <footer>For more information visit <a href="http://www.discovernorthernireland.com/" target="_blank">Discover Northern Ireland</a></footer>
  </div>
  </body>
</html>

jQuery:

$('.contentLinks').click(function() {
  $(this).addClass("selectedTab");
  $('a').not(this).removeClass("selectedTab");
  //var is_element_li = $(this).parent().parent().get(0).tagName.is("li");
  var is_element_li = $(this).parent().parent().is("li");
  if(is_element_li){
    $(this).parent().parent().addClass("selectedTab");
  }
  var nameAttribute = $(this).attr('name');
  nameAttribute = "#"+ nameAttribute;
  $(nameAttribute).show();  
  $('div.content').not(nameAttribute).hide();
});

How can I get the style to apply?

No, it doesn't; I get a hash-change and then this: screenshot; incidentally, if you're using parent().parent() stop that, and use closest(selectorString) instead. — David Thomas
– David Thomas, Commented Feb 19, 2013 at 1:00
It seems to take effect .. is this wrong? jsfiddle.net/ExplosionPIlls/GEDf6 — Explosion Pills
– Explosion Pills, Commented Feb 19, 2013 at 1:00
In the example you linked to, the styles for the a are not changed because only the li gets the new class, but the a styles supersede them. — Explosion Pills
– Explosion Pills, Commented Feb 19, 2013 at 1:01

zxqx · Accepted Answer · 2013-02-19 01:02:12Z

2

You need to add the selectedTab class to your anchor element, instead of the the li element:

$(this).parent().parent().children("a").addClass("selectedTab");

answered Feb 19, 2013 at 1:02

zxqx

5,2352 gold badges22 silver badges28 bronze badges

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

3 Comments

Colin747 Over a year ago

That somewhat worked, I've updated the code on the live link, if you click the "Game" tab you'll see that it now changes the background behind the tabs white which is not what I want.

zxqx Over a year ago

It looks like you've somehow added the selectedTab class to the ul, which is causing it to display that way. Please double-check your code.

Colin747 Over a year ago

Thanks, I'd forgot to change my code just after the if statement.

Collectives™ on Stack Overflow

jQuery - CSS class being applied but not taking effect

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related