根据选择显示和隐藏 div

Question

我想隐藏所有未激活的 div。但是每当我重新加载所有选项卡内容时。下面是 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">
      <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>

我尽了最大的努力，但没能把这件事做好。非常感谢您的帮助。

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>

根据选择显示和隐藏 div

Show and hide div based on the selection

html

javascript

jquery

selection

show-hide