加载页面时,默认选项卡不显示内容

时间:2016-12-26 06:50:54

标签: javascript html css

在加载页面时,一个选项卡应默认在页面加载时显示其内容,任何人都告诉我修改JS

JS:

load(file) {
 fs.readFile(file).Then(function (fd){
var data = JSON.parse(fd);
var EachPromise = [ ]; 
for(var i of data.array){
EachPromise.push(new Thing(i.id)); // new Thing is Asynchronous
}
Promise.all(EachPromise)  .then(function (result){
console.log('this is result',result);  
}).Catch(function (error){
console.log('this is error', error);
});
}

JSfiddle没有工作,所以在这里查看html和css代码 - tabs

1 个答案:

答案 0 :(得分:0)

您正在使用css隐藏所有选项卡,因此您必须在第一个选项卡上添加活动类以使其可见。

导致此问题的css。

d.foo

在第一个标签页上设置活动类的代码。

 .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;}