jQuery tabs with media queries in CSS

Question

I'm trying to create tabs for an area on a page using jQuery. The tabs are set up as an unordered list. The current selected tab is given the class "home-tab-active" while the other tabs are given the class "home-tab". What I want it to do is, when a user clicks on a tab that is not currently selected, to get rid of it's current class and replace it the class "home-tab-active"

However, it seems to be applying only part of the "home-tab" class and the "home-tab-active" class seems as though it's not being removed. I'm not sure if this is something to do with my jQuery code (this is the first time I've used jQuery is about a year), or if it's because of the media queries (are there special considerations to removing and adding classes via jQuery when there are media queries involved?)

HTML:

<div id="home-search-tabs" class="cf">
    <ul class="cf">
        <li class="home-tab-active"><a href="search-residential.php">Residential</a></li>
        <li class="home-tab"><a href="search-commercial.php">Commercial</a></li>
        <li class="home-tab"><a href="search-land.php">Land</a></li>
        <li class="home-tab"><a href="search-rentals.php">Rentals</a></li>
    </ul>
</div>

CSS:

#home-search-tabs {
    width: 100%;
    background-color: #333;
    border-bottom: 1px solid #777;
    padding: 5px 0px 0px 4px;
    font-size: 16px;
    font-family: "Source Sans Pro", arial, sans-serif;
}

.home-tab {
    position: relative;
    top: 4px;
    list-style-type: none;
    display: block;
    float: left;
    padding: 0px;
    margin: 0px 0px 0px 4px;
    background-color: #3B3B3B;
    border: 1px solid #777;
}

.home-tab-active {
    position: relative;
    list-style-type: none;
    display: block;
    float: left;
    padding: 0px;
    margin: 0px 0px 0px 4px;
    background-color: #2c2c2c;
    border: 1px solid #777;
    border-bottom: 1px solid #2c2c2c;
}

.home-tab-active a, .home-tab-active a:active, .home-tab-active a:visited {
    display: block;
    color: #FFF;
    text-decoration: none;
    padding: 5px;
    margin: 0px;
}

.home-tab a, .home-tab a:active, .home-tab a:visited {
    position: relative;
    display: block;
    color: #FFF;
    text-decoration: none;
    padding: 3px;
    margin: 0px;
}

@media (min-width: 768px) {

    #home-search-tabs {
        padding-top: 0px;
        padding-left: 10px;
    }

    .home-tab {
        margin-left: 6px;
    }

    .home-tab a, .home-tab a:active, .home-tab a:visited {
        padding: 3px 6px;
    }

    .home-tab-active a, .home-tab-active a:active, .home-tab-active a:visited {
        padding: 5px 6px;
    }

}

Javascript/jQuery:

<script>
  $(document).ready(function() {
    $("#home-search-tabs .home-tab a").click(function(){
      $(".home-tab-active").removeClass('home-tab-acive').addClass('home-tab');
      $(this).parent('li').removeClass('home-tab').addClass('home-tab-active');
      var tabSelected = $(this).text();
      alert (tabSelected);
      return false;
    });
</script>

Answer 1

You have a typo in your JS, you remove the class home-tab-acive instead of home-tab-active.

A little improvement of your code: Give all the tab links the class home-tab and home-tab-active additionaly to the one that is active. In this case the event handler is used for all of the tab links. In your example when you click on the link that's initially marked as active, you actually load a new page.

HTML:

<div id="home-search-tabs" class="cf">
    <ul class="cf">
        <li class="home-tab home-tab-active"><a href="search-residential.php">Residential</a></li>
        <li class="home-tab"><a href="search-commercial.php">Commercial</a></li>
        <li class="home-tab"><a href="search-land.php">Land</a></li>
        <li class="home-tab"><a href="search-rentals.php">Rentals</a></li>
    </ul>
</div>

JS:

<script>
  $(document).ready(function() {
    $("#home-search-tabs .home-tab a").click(function(e){
      $(".home-tab-active").removeClass('home-tab-active');
      $(this).parent('li').addClass('home-tab-active');
      e.preventDefault();
    });
  });
</script>