jquery - 使用 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>显示每个选项卡的内容。

The error that the code is presenting me, is that when I click on each existing tabs, it does not work for me, the content is not hidden, it is not executed correctly.

我已经设法模仿了这个设计，但它不起作用，而且设计中有一个小错误，灰色边框在顶部，而不是在代表每个选项卡的文本上。

Answer 1

尝试跟随

• 对于li，事件类是resp-tab-active set and reset this
• 删除不必要的 display:block 样式
• 给内容div ids
• 给跨度元素hrefs
• 将 display:flex 添加到 ul.resp-tabs-list 的样式中>

注意，您不应该使用href作为span。使用一些数据属性来代替 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>