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

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

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

HTML:

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>

$（文档）.ready（函数（）{
$（“#主页搜索选项卡。主页选项卡a”）。单击（函数（）{
$（“.home-tab-active”）.removeClass（'home-tab-acive'）.addClass（'home-tab'）；
$（this）.parent（'li'）.removeClass（'home-tab'）.addClass（'home-tab-active'）；
var tabSelected=$（this）.text（）；
警报（已选择）；
返回false；
});

如果您的JS中有输入错误，您将删除类主选项卡acive，而不是主选项卡active

代码的一点改进：除了活动的选项卡链接外，还将所有选项卡链接设置为“类主页”选项卡和“主页”选项卡活动。在本例中，事件处理程序用于所有选项卡链接。在您的示例中，当您单击最初标记为“活动”的链接时，您实际上加载了一个新页面

HTML:

JS:

$（文档）.ready（函数（）{
$（“#主页搜索选项卡。主页选项卡a”）。单击（功能（e）{
$（“.home-tab-active”）.removeClass（'home-tab-active'）；
$（this）.parent（'li'）.addClass（'home-tab-active'）；
e、 预防默认值（）；
});
});

实际上，我有另一个事件侦听器用于第一个链接，它只返回false。我将它从粘贴在此处的代码中剥离出来，这样它就不会因为不相关的代码而显得过于臃肿。是的，这就是问题所在：/谢谢。

#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;
    }

}

<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>

<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>

<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>