根据所选内容显示和隐藏div

Question

我想隐藏所有未激活的div。但是当我重新加载所有标签内容时，以下是面临问题的用户界面截图。

下面是代码。

$('.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>