Показать и скрыть 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>