带有 CSS 媒体查询的 jQuery 选项卡

Question

我正在尝试使用 jQuery 为页面上的某个区域创建选项卡。选项卡设置为无序列表。当前选定的选项卡被赋予类“home-tab-active”，而其他选项卡被赋予类“home-tab”。我想要它做的是，当用户单击当前未选中的选项卡时，摆脱它的当前类并将其替换为“home-tab-active”类

但是，它似乎只应用了“home-tab”类的一部分，而“home-tab-active”类似乎没有被删除。我不确定这是否与我的 jQuery 代码有关(这是我第一次使用 jQuery 大约一年)，或者是否是因为媒体查询(是否有特殊考虑删除和添加类当涉及媒体查询时通过 jQuery？)

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

你的 JS 中有错别字，你删除了类 home-tab-active 而不是 home-tab-active。

对您的代码进行一点改进:为所有选项卡链接提供类 home-tab 和 home-tab-active 附加到事件的链接。在这种情况下，事件处理程序用于所有选项卡链接。在您的示例中，当您单击最初标记为事件的链接时，您实际上加载了一个新页面。

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>