選択に基づいてdivを表示/非表示

Question

アクティブではないすべてのdivを非表示にしたいしかし、これまでにリロードすると、すべてのタブの内容が1つになります。以下は、問題に直面しているUIのスクリーンショットです。以下は

コードです。

$('.tab a').on('click', function (e) { 
 
     
 
     e.preventDefault(); 
 
     
 
     $(this).parent().addClass('active'); 
 
     $(this).parent().siblings().removeClass('active'); 
 
     
 
     target = $(this).attr('href'); 
 
    
 
     $('.tab-content > div').not(target).hide(); 
 
     
 
     $(target).fadeIn(600); 
 
     
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form animated fadeInDown "> 
 
      
 
      <ul class="tab-group"> 
 
    \t \t <li class="tab active"><a href="#roles">Roles</a></li> 
 
      <li class="tab "><a href="#user">User</a></li> 
 
    \t \t <li class="tab "><a href="#portfolio">Portfolio</a></li> 
 
    \t \t <li class="tab "><a href="#programs">Programs</a></li> 
 
    \t \t <li class="tab "><a href="#projects">Projects</a></li> 
 
    \t \t <li class="tab "><a href="#phases">Phases</a></li> 
 
    \t \t <li class="tab "><a href="#tasks">Tasks</a></li> 
 
      </ul> 
 
      
 
      <div class="tab-content"> 
 
        
 
      <div id="roles" > 
 
       <h1> Roles coming soon</h1> 
 
       
 
       </div> 
 
    \t \t 
 
    \t \t <div id="user"> 
 
       <h1>Users added soon</h1> 
 
    
 
      </div> 
 
    \t \t 
 
    \t \t <div id="portfolio"> 
 
       <h1>Portfolio added soon</h1> 
 
    
 
      </div> 
 
    \t \t 
 
    \t \t <div id="programs"> 
 
       <h1>Programs added soon</h1> 
 
    
 
      </div> 
 
    \t \t 
 
    \t \t <div id="projects"> 
 
       <h1>Projects added soon</h1> 
 
    
 
      </div> 
 
    \t \t 
 
    \t \t <div id="phases"> 
 
       <h1>Phases added soon</h1> 
 
    
 
      </div> 
 
    \t \t 
 
    \t \t <div id="tasks"> 
 
       <h1>Tasks added soon</h1> 
 
    
 
      </div> 
 
    \t \t 
 
    \t \t 
 
      
 
      </div> 
 
      
 
    </div>

私はできるだけ多くを試みたが、右のこの事を得ることができませんでした。助けをいただければ幸いです。

Answer 1

あなたのコードが私のために働いていると思われる以外の特定のCSSを適用してください。

//See the first tab visible by default 
 
$($('.tab-group > li.active').children('a').attr('href')).show(); 
 

 
$('.tab a').on('click', function (e) { 
 

 
    e.preventDefault(); 
 

 
    $(this).parent().addClass('active'); 
 
    $(this).parent().siblings().removeClass('active'); 
 

 
    target = $(this).attr('href'); 
 

 
    $('.tab-content > div').not(target).hide(); 
 
    
 
    $(target).fadeIn(600); 
 

 
});

.tab-content div{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form animated fadeInDown "> 
 

 
     <ul class="tab-group"> 
 
     <li class="tab active"><a href="#roles">Roles</a></li> 
 
     <li class="tab "><a href="#user">User</a></li> 
 
     <li class="tab "><a href="#portfolio">Portfolio</a></li> 
 
     <li class="tab "><a href="#programs">Programs</a></li> 
 
     <li class="tab "><a href="#projects">Projects</a></li> 
 
     <li class="tab "><a href="#phases">Phases</a></li> 
 
     <li class="tab "><a href="#tasks">Tasks</a></li> 
 
     </ul> 
 

 
     <div class="tab-content"> 
 

 
     <div id="roles"> 
 
      <h1> Roles coming soon</h1> 
 

 
      </div> 
 

 
     <div id="user"> 
 
      <h1>Users added soon</h1> 
 

 
     </div> 
 

 
     <div id="portfolio"> 
 
      <h1>Portfolio added soon</h1> 
 

 
     </div> 
 

 
     <div id="programs"> 
 
      <h1>Programs added soon</h1> 
 

 
     </div> 
 

 
     <div id="projects"> 
 
      <h1>Projects added soon</h1> 
 

 
     </div> 
 

 
     <div id="phases"> 
 
      <h1>Phases added soon</h1> 
 

 
     </div> 
 

 
     <div id="tasks"> 
 
      <h1>Tasks added soon</h1> 
 

 
     </div> 
 

 

 

 
     </div> 
 

 
</div>