使用jQuery运行标签页时出错？

Question

我已经在开发选项卡，仅使用jQuery而没有其他第三方插件。

jQuery(document).ready(function(){
  $(".resp-tab-content").hide();
  $("ul.resp-tabs-list li:first").addClass("active").show();
  $(".resp-tab-content:first").show();

  $("ul.resp-tabs-list li").click(function()
       {
    $("ul.resp-tabs-list li").removeClass("active");
    $(this).addClass("active");
    $(".resp-tab-content").hide();

    var activeTab = $(this).find("span").attr("href");
    $(activeTab).fadeIn();
    return false;
  });
});

ul.resp-tabs-list {
    list-style: none;
    background: none;
    margin: 0 auto;
    padding: 0;
    border-bottom: solid 1px #EAEAEA;
}

.resp-tab-item {
    color: #343a4e;
    font-size: .875em;
    cursor: pointer;
    padding: 0 .6em .5em;
    display: inline-block;
    list-style: none;
    float: left;
    border-bottom: solid 1px #FFFFFF;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-transform: capitalize;
}

.resp-tab-active {
    text-shadow: none;
    color: #1ca0de;
    border-bottom: solid 1px #3E9CCA;
    padding-bottom: .5em;
}

.resp-tabs-container {
    padding: 0px;
    clear: left;
    border-top: none;
    background: none;
}

.tab-content {
    margin: 1em 0 0 0;
    border-bottom: solid 1px #EAEAEA;
    padding-bottom: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="horizontalTab" style="display: block; margin: 0px; width: 100%;">
  <ul class="resp-tabs-list">
    <li class="resp-tab-item resp-tab-active"><span>Today</span></li>
    <li class="resp-tab-item"><span>This Week</span></li>
    <li class="resp-tab-item"><span>This Month</span></li>
  </ul>
  <div class="resp-tabs-container">
    <div class="resp-tab-content resp-tab-content-active" style="display:block"><div class="tab-content">a</div></div>
    <div class="resp-tab-content"><div class="tab-content">b</div></div>
    <div class="resp-tab-content"><div class="tab-content">c</div></div>
  </div>
</div>

我从发现here的示例中进行设计。

我的想法不是使用标签<a>，而是使用标签<span>显示每个标签的内容。

  

代码显示给我的错误是，当我单击每个现有选项卡时，它对我不起作用，内容没有被隐藏，因此未正确执行。

我设法模仿了该设计，但是它没有用，并且在设计中存在一个小错误，灰色边框位于顶部，而不是代表每个选项卡的文本。

Answer 1

尝试关注

• 对于li，已设置resp-tab-active的活动类别，并将其重置
• 删除display:block样式，因为这是不必要的
• 将ids赋予内容div
• 将hrefs赋予span元素
• 为display:flex的样式添加ul.resp-tabs-list

注意，请勿使用href作为跨度。使用一些数据属性，例如data-tab-id等

jQuery(document).ready(function(){
  $(".resp-tab-content").hide();
  $("ul.resp-tabs-list li:first").addClass("active").show();
  $(".resp-tab-content:first").show();

  $("ul.resp-tabs-list li").click(function()
       {
    $("ul.resp-tabs-list li").removeClass("resp-tab-active");
    $(this).addClass("resp-tab-active");
    $(".resp-tab-content").hide();

    var activeTab = $(this).find("span").attr("href");
    $(activeTab).fadeIn();
    return false;
  });
});

ul.resp-tabs-list {
    list-style: none;
    background: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    border-bottom: solid 1px #EAEAEA;
}

.resp-tab-item {
    color: #343a4e;
    font-size: .875em;
    cursor: pointer;
    padding: 0 .6em .5em;
    display: inline-block;
    list-style: none;
    float: left;
    border-bottom: solid 1px #FFFFFF;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-transform: capitalize;
}

.resp-tab-active {
    text-shadow: none;
    color: #1ca0de;
    border-bottom: solid 1px #3E9CCA;
    padding-bottom: .5em;
}

.resp-tabs-container {
    padding: 0px;
    clear: left;
    border-top: none;
    background: none;
}

.tab-content {
    margin: 1em 0 0 0;
    border-bottom: solid 1px #EAEAEA;
    padding-bottom: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="horizontalTab" style="display: block; margin: 0px; width: 100%;">
  <ul class="resp-tabs-list">
    <li class="resp-tab-item resp-tab-active"><span href="#a">Today</span></li>
    <li class="resp-tab-item"><span href="#b">This Week</span></li>
    <li class="resp-tab-item"><span href="#c">This Month</span></li>
  </ul>
  <div class="resp-tabs-container">
    <div id="a" class="resp-tab-content resp-tab-content-active"><div class="tab-content">a</div></div>
    <div id="b" class="resp-tab-content"><div class="tab-content">b</div></div>
    <div id="c" class="resp-tab-content"><div class="tab-content">c</div></div>
  </div>
</div>

Answer 2

• 您做错了方法。您添加了错误的active类 resp-tab-active
• 代替在href中使用span，而对目标data-target使用li

jQuery(document).ready(function(){
  $(".resp-tab-content").hide();
  $("ul.resp-tabs-list li:first").addClass("resp-tab-active").show();
  $(".resp-tab-content:first").show();

  $("ul.resp-tabs-list li").click(function(){
    $("ul.resp-tabs-list li").removeClass("resp-tab-active");
    $(this).addClass("resp-tab-active");
    $(".resp-tab-content").hide();

    var activeTab = $(this).find("span").attr("data-target");
    $(activeTab).fadeIn();
    //return false;
  });
});

ul.resp-tabs-list {
    list-style: none;
    background: none;
    margin: 0 auto;
    padding: 0;
    border-bottom: solid 1px #EAEAEA;
}

.resp-tab-item {
    color: #343a4e;
    font-size: .875em;
    cursor: pointer;
    padding: 0 .6em .5em;
    display: inline-block;
    list-style: none;
    float: left;
    border-bottom: solid 1px #FFFFFF;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-transform: capitalize;
}

.resp-tab-active {
    text-shadow: none;
    color: #1ca0de;
    border-bottom: solid 1px #3E9CCA;
    padding-bottom: .5em;
}

.resp-tabs-container {
    padding: 0px;
    clear: left;
    border-top: none;
    background: none;
}

.tab-content {
    margin: 1em 0 0 0;
    border-bottom: solid 1px #EAEAEA;
    padding-bottom: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="horizontalTab" style="display: block; margin: 0px; width: 100%;">
  <ul class="resp-tabs-list">
    <li class="resp-tab-item resp-tab-active">
        <span data-target="#first">Today</span>
    </li>
    <li class="resp-tab-item">
       <span data-target="#second">This Week</span>
    </li>
    <li class="resp-tab-item">
       <span data-target="#third">This Month</span>
    </li>
  </ul>
  <div class="resp-tabs-container">
    <div class="resp-tab-content" id="first">
      <div class="tab-content">a</div>
    </div>
    <div class="resp-tab-content" id="second">
      <div class="tab-content">b</div>
    </div>
    <div class="resp-tab-content" id="third">
      <div class="tab-content">c</div>
    </div>
  </div>
</div>

Answer 3

使用CSS类隐藏/激活内容。 根据选项卡选择添加/删除课程。

 $(".resp-tab-item").click(function(ev) {
     var activeClass = $(".resp-tab-item.resp-tab-active");
     activeClass.removeClass("resp-tab-active");
     var target;
     if (ev.target == this) {
         target = ev.target;
     } else {
         target = ev.target.parentElement;
     }
     $(target).addClass("resp-tab-active");
     var count = Array.prototype.indexOf.call(target.parentElement.children, target);
     var activeTabC = $(".resp-tab-content.resp-tab-content-active");
     activeTabC.removeClass("resp-tab-content-active");
     activeTabC.addClass("resp-tab-content-hide");
     var tabNeedToActive = $($(".resp-tab-content")[count]);
     tabNeedToActive.removeClass("resp-tab-content-hide");
     tabNeedToActive.addClass("resp-tab-content-active");


 });

ul.resp-tabs-list {
    list-style: none;
    background: none;
    margin: 0 auto;
    padding: 0;
    border-bottom: solid 1px #EAEAEA;
}

.resp-tab-item {
    color: #343a4e;
    font-size: .875em;
    cursor: pointer;
    padding: 0 .6em .5em;
    display: inline-block;
    list-style: none;
    float: left;
    border-bottom: solid 1px #FFFFFF;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-transform: capitalize;
}

.resp-tab-active {
    text-shadow: none;
    color: #1ca0de;
    border-bottom: solid 1px #3E9CCA;
    padding-bottom: .5em;
}

.resp-tabs-container {
    padding: 0px;
    clear: left;
    border-top: none;
    background: none;
}

.tab-content {
    margin: 1em 0 0 0;
    border-bottom: solid 1px #EAEAEA;
    padding-bottom: 1em;
}

.resp-tab-content-hide {
  display : none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="horizontalTab" style="display: block; margin: 0px; width: 100%;">
  <ul class="resp-tabs-list">
    <li class="resp-tab-item resp-tab-active">
      <span>Today</span>
    </li>
    <li class="resp-tab-item">
      <span>This Week</span>
    </li>
    <li class="resp-tab-item">
      <span>This Month</span>
    </li>
  </ul>
  <div class="resp-tabs-container">
    <div class="resp-tab-content resp-tab-content-active">
      <div class="tab-content">a</div>
    </div>
    <div class="resp-tab-content resp-tab-content-hide">
      <div class="tab-content">b</div>
    </div>
    <div class="resp-tab-content resp-tab-content-hide">
      <div class="tab-content">c</div>
    </div>
  </div>
</div>

Answer 4

由于我认为没有其他答案可以正确解决此问题，所以我会

您应该使用links (<a>)而不是span。从语义上来说，这是您创建到页面上另一个位置（目标标记）的链接的正确选择。

另外，不要将li定位为事件处理程序，而将链接本身定位为事件处理程序，那么您可以直接访问href属性

EDIT （代码）已修改，以支持多个标签。

jQuery(document).ready(function(){
  $(".resp-tab-content").hide();
  $("ul.resp-tabs-list li:first").addClass("active").show();
  /*Folling line changed to support multi tabs*/
  $(".resp-tabs-container .resp-tab-content:first-child").show();

  $("ul.resp-tabs-list a").click(function()
       {
    $("ul.resp-tabs-list li").removeClass("resp-tab-active");
    $(this).parent("li").addClass("resp-tab-active");
    /*Following line removed to support multi tabs
    $(".resp-tab-content").hide();
    */

    var activeTab = $(this).attr("href");
    /*Folliwng line added to support multi tabs*/
    $(activeTab).siblings(".resp-tab-content").hide();
    $(activeTab).fadeIn();
    return false;
  });
});

ul.resp-tabs-list {
    list-style: none;
    background: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    border-bottom: solid 1px #EAEAEA;
}

.resp-tab-item {
    color: #343a4e;
    font-size: .875em;
    cursor: pointer;
    /*padding: 0 .6em .5em;  MOVE THIS TO THE A Style*/
    display: inline-block;
    list-style: none;
    /*float: left; - Don't need this with Flexbox*/
    border-bottom: solid 1px #FFFFFF;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-transform: capitalize;
}

.resp-tab-item a, .resp-tab-item a:visited, .resp-tab-item a:active, .resp-tab-item a:hover {
  text-decoration:none;
  color: #343a4e; 
  list-style: none;
  padding: 0 .6em .5em; /*Move from LI style*/
  display:inline-block; /*Makes vertical padding meaningful*/
}

.resp-tab-active {
    text-shadow: none;
    color: #1ca0de;
    border-bottom: solid 1px #3E9CCA;
    /*padding-bottom: .5em;*/
}

.resp-tabs-container {
    padding: 0px;
    clear: left;
    border-top: none;
    background: none;
}

.tab-content {
    margin: 1em 0 0 0;
    border-bottom: solid 1px #EAEAEA;
    padding-bottom: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="horizontalTab" style="display: block; margin: 0px; width: 100%;">
  <ul class="resp-tabs-list">
    <li class="resp-tab-item resp-tab-active"><a href="#a">Today</a></li>
    <li class="resp-tab-item"><a href="#b">This Week</a></li>
    <li class="resp-tab-item"><a href="#c">This Month</a></li>
  </ul>
  <div class="resp-tabs-container">
    <div id="a" class="resp-tab-content resp-tab-content-active"><div class="tab-content">a</div></div>
    <div id="b" class="resp-tab-content"><div class="tab-content">b</div></div>
    <div id="c" class="resp-tab-content"><div class="tab-content">c</div></div>
  </div>
</div>

<div id="horizontalTab2" style="display: block; margin: 0px; width: 100%;">
  <ul class="resp-tabs-list">
    <li class="resp-tab-item resp-tab-active"><a href="#aa">Today</a></li>
    <li class="resp-tab-item"><a href="#bb">This Week</a></li>
    <li class="resp-tab-item"><a href="#cc">This Month</a></li>
  </ul>
  <div class="resp-tabs-container">
    <div id="aa" class="resp-tab-content resp-tab-content-active"><div class="tab-content">aa</div></div>
    <div id="bb" class="resp-tab-content"><div class="tab-content">bb</div></div>
    <div id="cc" class="resp-tab-content"><div class="tab-content">cc</div></div>
  </div>
</div>

Answer 5

将JQuery脚本放在代码底部。