如何使 jQuery tabs-btn 默认关闭

Question

我正在使用 hide/show div 来自 link 的代码：

$(function() {
  $('.tabs').myTabs({
    // container of navigation inside '.tabs'
    nav: '.tab-btns',
    // container of contents inside '.tabs'
    tabs: '.tab-contents'
  });
});

$.fn.myTabs = function(settings) {
  return this.each(function() {

    /*
save cached version of the first elements inside the containers. by calling the first elements of each container you are not limitng the plugin user to any specific class or elememt.
*/
    var btns = $(settings.nav, this).children(),
      tabs = $(settings.tabs, this).children();


    /* we relying on the order of the elements as the conection between the buttons and the tabs  
notice that .each() get the index of the btn..
we are useinf it to find the current tab.
*/

    btns.each(function(index) {
      var btn = $(this),
        tab = tabs.eq(index);


      btn.click(function(e) {
        /* prevent unnesscry work by checking if the button clicked is already active  */
        if (btn.is('.active')) return false;

        /* notice that first filter to find the last 'active' button before we remove the 'active' class  otherwise it remove the class for every button. unnesscry work prevented again */
        btns.filter('.active').removeClass('active');

        /* hide previus tab.. */
        tabs.filter(':visible').hide();

        btn.addClass('active');
        tab.show();


        return false;
      });
    });

    // emulate click on the first tab button;
    btns.first().click();
  });
};

.tab-btns .active {
  font-weight: bold;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="tabs">
  <nav class="tab-btns">
    <a href="#tab1">tab btn 1</a>
    <a href="#tab2">tab btn 2</a>
    <a href="#tab3">tab btn 3</a>
    <a href="#tab4">tab btn 4</a>
  </nav>
  <div class="tab-contents">
    <div id="tab1">tab content 1</div>
    <div id="tab2">tab content 2</div>
    <div id="tab3">tab content 3</div>
    <div id="tab4">tab content 4</div>
  </div>
</div>

是否可以让 'navigation' divs（标签 tbn1 等）默认隐藏？

Answer 1

只需这样做：

 $('.tab-contents').find('div:not(":first")').hide(); // if you want to hide all divs except for 1st one.
 $('.tab-contents div').hide(); // if you want to hide all divs 
 $('.tab-btns a').on("click",function()
 {
    $('.tab-contents div').hide();
    $($(this).attr('href')).show();
 });

示例：https://jsfiddle.net/DinoMyte/kqd7wfLc/5/

当您已经有 build-in API 来处理制表符时，这是一种非常蹩脚的做事方式。 jquery Tabs

如何使 jQuery tabs-btn 默认关闭

How to make jQuery tabs-btn default closed

html

jquery

tabs