Easy Responsive Tabs - 在移动标签上不隐藏

Question

首先我不擅长 javascript。我使用了 Easy Responsive 选项卡，但我遇到的问题是，在移动版本上单击它不会隐藏内容，只会删除类“d_active”并将其添加到其他元素。

我认为如果在移动版本中启动它会删除类 d_active 它会并且只有在单击添加这个类时才会起作用...但我不确定？

所有的帮助都会很棒！

示例链接如下：

http://jsfiddle.net/3vLwy022/

Javascprit：

    $("ul.tabs li").click(function() {

        $(".tab_content").hide();
        var activeTab = $(this).attr("rel");
        $("#" + activeTab).fadeIn();

        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");

        $(".tab_drawer_heading").removeClass("d_active");
        $(".tab_drawer_heading[rel^='" + activeTab + "']").addClass("d_active");
        $(".tab_content").hide();
        var d_activeTab = $(this).attr("rel");
        $("#" + d_activeTab).fadeIn();

    });
    /* if in drawer mode */
    $(".tab_drawer_heading").click(function() {

        $(".tab_content").hide();

        var d_activeTab = $(this).attr("rel");
        $("#" + d_activeTab).fadeIn();

        $(this).addClass("d_active");

        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn(); //Fade in the active content
        return false;

        $("ul.tabs li").removeClass("active");
        $("ul.tabs li[rel^='" + d_activeTab + "']").addClass("active");
    });

HTML 被截断了，所以请转到 jsfiddle :)

Answer 1

如果您没有其他要求，您可以使用:visible Selector 来检查选项卡是否隐藏，并在hide 和fadeIn 之间切换。

$(".tab_content").hide();
$(".tab_content:first").show();

$(".tab_drawer_heading").click(function() {
    var d_activeTab = $(this).attr("rel");
    var tab = $("#" + d_activeTab);
    
    //Checking if the tab is visible
    if(tab.is(":visible")){
      //If you clicked and it is, hide.
      tab.hide();
    }else{
      //Else, hide everything(except for it) and fade in.
      $(".tab_content").not(tab).hide();
      tab.fadeIn()
    }
});

ul.tabs tr.border-list {
    width: 100%;
    border-bottom: 1px solid #dbdbdb;

}

ul.tabs {
    width: 100%;
    float: left;
    list-style: none;
}


ul.tabs li {
    float: left;
    cursor: pointer;
    padding: 0px 31px;
    line-height: 1.42857143;
    overflow: hidden;
    position: relative;
    font-family: 'PT Serif', serif;
    font-size: 1.4em;
    color: #a3958e;
    line-height: 1.42857143;
}



ul.tabs li:hover,
ul.tabs li.active {
    color: #ec1552;
}

.tab_container {
    border-top: none;
    clear: both;
    float: left;
    width: 100%;
    background: #fff;
    overflow: auto;
}

.tab_content {
    display: none;
}

.tab_drawer_heading {
    display: none;
}


ul.tabs h4 {
    font-family: 'PT Serif', serif;
    font-size: 1.3em;
    color: #a3958e;
    line-height: 1.42857143;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media screen and (max-width: 620px) {
    .tabs {
        display: none;
    }
    .tab_drawer_heading {
        border-bottom: 1px solid #ad9779;
        border-top: 1px solid #ad9779;
        background-color: #ccbaa1;
        color: #fff;
        margin: 0;
        padding: 15px 20px;
        display: block;
        cursor: pointer;
        font-family: 'PT Serif', serif;
        font-size: 1.4em;
        letter-spacing: 1px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
 }

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

<div class="tab_container">
  <h3 class="tab_drawer_heading" rel="tab1">OTHER: 1</h3>
  <div id="tab1" class="tab_content">
    Something in tab
  </div>

  <h3 class="tab_drawer_heading" rel="tab2">OTHER: 2</h3>
  <div id="tab2" class="tab_content">
    Something in tab 2
  </div>
</div>