我想隐藏所有不活动的 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>
我尽了最大的努力,但还是没能把这件事做好。非常感谢您的帮助。
最佳答案
只需应用给定的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>
关于javascript - 根据选择显示和隐藏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39638934/