默認選項卡不顯示，而加載

的頁面，而加載頁面，一個標籤應默認顯示在頁面加載其內容的內容，誰能告訴我修改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

來源

2016-12-26 Grapy

你隱藏所有使用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>

來源

2016-12-26 07:08:29 Deep

深，謝謝，工作...... – Grapy

@Grapy歡迎您 – Deep

默認選項卡不顯示，而加載

回答

相關問題