закладку по умолчанию не отображается содержимое во время загрузки страницы

во время загрузки страницы, одна вкладка должна показать его содержимое по умолчанию на странице загрузки, кто-нибудь сказать мне модификация 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

Deep, спасибо, работа ...... – Grapy

@Grapy вы можете – Deep

закладку по умолчанию не отображается содержимое во время загрузки страницы

ответ

Смежные вопросы