默认选项卡不显示，而加载

问题描述：

的页面，而加载页面，一个标签应默认显示在页面加载其内容的内容，谁能告诉我修改JS的默认选项卡不显示，而加载

JS：

var $tabs = $('.tabs > div'), _currhash, $currTab;`function showTab() { 
    if($currTab.length>0) { 
    $tabs.removeClass('active'); 
    $currTab.addClass('active'); 
    } 
}`/* find the panels and 'unlink' the id to prevent page jump */ 
$tabs.each(function() { 
    var _id = $(this).attr('id'); 
    $(this).attr('id',_id+'_tab'); 
    /* eg we have given the tab an id of 'tab1_tab' */ 
});`/* set up an anchor 'watch' for the panels */ 
function anchorWatch() {`if(document.location.hash.length>0) { 
    /* only run if 'hash' has changed */ 
    if(_currhash!==document.location.hash) { 
     _currhash = document.location.hash;`/* we only want to match the 'unlinked' id's */ 
     $currTab = $(_currhash+'_tab'); 
     showTab(); 
    } 
    } 
} ` setInterval(anchorWatch,300);

的jsfiddle不工作，所以检查HTML和CSS代码在这里 - tabs

答

你隐藏所有使用CSS的标签，所以你将不得不在第一个选项卡上添加活动类，使其可见。

你的CSS造成这种情况。

.tabs > div { display:none;} 
.tabs > div.active { display:block;}

在第一个选项卡上设置活动类的代码。

$tabs.first().addClass("active");

var $tabs = $('.tabs > div'), _currhash, $currTab; 
 

 
    $tabs.first().addClass("active"); 
 
    
 
    function showTab() { 
 
     if($currTab.length>0) { 
 
     $tabs.removeClass('active'); 
 
     $currTab.addClass('active'); 
 
     } 
 
    } 
 
    /* find the panels and 'unlink' the id to prevent page jump */ 
 
    $tabs.each(function() { 
 
     var _id = $(this).attr('id'); 
 
     $(this).attr('id',_id+'_tab'); 
 
     /* eg we have given the tab an id of 'tab1_tab' */ 
 
    }); 
 

 
    /* set up an anchor 'watch' for the panels */ 
 
    function anchorWatch() { 
 
     if(document.location.hash.length>0) { 
 
     /* only run if 'hash' has changed */ 
 
     if(_currhash!==document.location.hash) { 
 
      _currhash = document.location.hash; 
 
      /* we only want to match the 'unlinked' id's */ 
 
      $currTab = $(_currhash+'_tab'); 
 
      showTab(); 
 
     } 
 
     } 
 
    } 
 
    setInterval(anchorWatch,300);

.tabs > div { display:none;} 
 
.tabs > div.active { display:block;} 
 
    
 
a { display:inline-block; padding:0.5em;} 
 
.tabs > div { padding:1em; border:2px solid #ccc;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<div> 
 
<a href="#tab1">link to tab 1</a> 
 
</div> 
 

 
    <!-- links --> 
 
    <a href="#tab1">Domain Names</a> 
 
    <a href="#tab2">SSL Certificates</a> 
 
    <a href="#tab3">Hosted Email</a> 
 
    <a href="#tab4">Web Security</a> 
 
    <a href="#tab5">Portfolio</a> 
 

 
    <!-- content --> 
 
    <div class="tabs"> 
 
    <div id="tab1"> <h1 style=" 
 
    text-align: center; 
 
">Domain Names</h1></h1> 
 
     <h3 style=" 
 
    text-align: center; 
 
    margin-top: -10px; 
 
    color: #0d0d0d; 
 
">Every domain extension you will ever need...and more.</h3> 
 
    <p>We gives you access to the largest selection of domain names available on the market through a single platform. All generic, specialty and country-code extensions at competitive prices plus hundreds of brand new top-level domains including an available inventory of over 17 million premium domains.</p> </div> 
 
    <div id="tab2"> Tab Two content </div> 
 
    <div id="tab3"> 
 
     Tab Three content with a 
 
    </div> 
 
    <div id="tab4"> Tab Four content </div> 
 
\t <div id="tab5"> 
 
<p>Currently associated with Inc – one of world’s largest & oldest WebRegistrar. in IT from QUT; Australia & is based in Mumbai (India).</p> 
 
\t </div> 
 
    </div> 
 
    
 
    
 
</body>

深，谢谢，工作...... – Grapy

@Grapy欢迎您 – Deep

默认选项卡不显示，而加载

相关推荐