在我的代码中我想要隐藏每个标签内容然后当我点击菜单然后菜单明智的内容将打开，我已经做了所有这些到目前为止。现在我想要当我点击菜单它应该slideDown如果我点击该菜单，内容应该用slideUp关闭。
$(document).on('click','.nav-link.active', function(){
var href = $(this).attr('href').substring(1);
$(this).removeClass('active');
// $('.tab-content').slideDown('slow');
$('.tab-pane[id="'+ href +'"]').removeClass('active');
$('.tab-content').hide().slideDown(600);
});
我想要这样但实际上却没有发生。 DEMO
$(document).ready(function() {
$('.tabs .col-3 a').click(function(e) { // Or bind to any other event you like, or call manually
e.preventDefault();
var hrefid = $(this).attr("href");
var tabid = ($(this).attr("href")).replace('#', ''); // remove #
var getContent = $(hrefid).html();
$('#maintabcontent').hide().html(getContent).stop().fadeIn(1400);
$('span.plus').text("+");
var $t = $('.tab-container');
if ($(this).parent().hasClass('active')) {
$(this).find('span').text("+");
$t.slideUp(function() {
$('#maintabcontent').html('');
});
$(this).parent().removeClass('active');
} else {
$(this).find('span').text("-");
$t.slideDown(600, function() {
});
if ($t.is(':visible')) {
$('.col-3').removeClass('active');
$(this).parent().addClass('active');
}
}
});
});.container {
margin: 0 auto;
max-width: 1280px;
overflow: hidden;
position: relative;
}
.full-width {
background: #dfdedb none repeat scroll 0 0;
width: 100%;
}
.main-container {
margin: 0 auto;
max-width: 1220px;
}
.padding-top-bottom-small {
padding-bottom: 1rem;
padding-top: 1rem;
}
.text-center {
text-align: center;
}
.col-3 {
display: inline-block;
max-width: 403px;
overflow: hidden;
position: relative;
vertical-align: top;
width: 32.5%;
}
.tabs .col-3 {
border-right: 2px solid #ffffff;
cursor: pointer;
}
.tab-container {
background: #505050 none repeat scroll 0 0;
display: none;
position: relative;
}
.main-container {
margin: 0 auto;
max-width: 1220px;
}
.padding-top-bottom-big {
padding-bottom: 2rem;
padding-top: 2rem;
}
.tab-content {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-width container tabs">
<div class="main-container">
<div class="col-3 first text-center padding-top-bottom-small"> <a href="#tab-1"><h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3></a>
</div>
<div class="col-3 second text-center padding-top-bottom-small"> <a href="#tab-2"><h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3></a>
</div>
<div class="col-3 text-center padding-top-bottom-small"> <a href="#tab-3"><h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus" data-tab="tab-1">+</span></h3></a>
</div>
</div>
</div>
<div class="tab-container">
<div class="main-container padding-top-bottom-big" id="maintabcontent"></div>
</div>
<div id="tab-1" class="tab-content">Tab Content 1</div>
<div id="tab-2" class="tab-content">Tab Content 2</div>
<div id="tab-3" class="tab-content">Tab Content 3</div>
答案 0 :(得分：1)
您可以使用解决方案http://jsfiddle.net/otpq2c5j/38/
$(document).on('click','.nav-link', function(){
$('.tab-pane').slideUp('fast');
$($(this).attr('href')).slideDown('slow');
});.tab-pane{
background-color:red;
padding-top:50px;
padding-bottom:50px;
}
.tab-content{
background-color:#ccc;
padding-top:10px;
padding-bottom:10px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<ul class="nav" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home" role="tabpanel">Good</div>
<div class="tab-pane" id="profile" role="tabpanel">Best</div>
<div class="tab-pane" id="messages" role="tabpanel">Poor</div>
<div class="tab-pane" id="settings" role="tabpanel">Ugly</div>
</div>
答案 1 :(得分：0)
你可以用简单的CSS做到这一点。而不是代码$('.tab-content').hide().slideDown(600);
在css的transition: height 1s;课程中使用active。
这样做，平滑地从前一班级转换到active班级。您可以对过渡效果进行许多自定义。请查看转换属性here以供参考。
答案 2 :(得分：0)
Add active class to first tab-content div
<div class="tab-pane active" id="home" role="tabpanel">Good</div>
Update css like this
.tab-content{
background-color:#ccc;
}
.tab-pane.active{
display:block;
}
Update js file like this
$(document).on('click','.nav-link', function(){
var href = $(this).attr('href').substring(1);
//$(this).removeClass('active');
// $('.tab-content').slideDown('slow');
$('.tab-pane[id="'+ href +'"]').slideToggle(600);
});
答案 3 :(得分：0)
希望这就是你要找的东西：
it('testing form the proper way', fakeAsync(() => {
// This first detectChanges is necessary to properly set up the form
fixture.detectChanges();
// Tick needs to be called in order for form controls to be registered properly.
tick();
comp.onSubmit(); // Validates and submits a form
expect(comp.submitted).toEqual(false);
}));
$('.tab-content').hide();
$(document).on('click','.nav-link:not(.active)', function(){
$('.tab-content').slideDown("slow");
});
$(document).on('click','.nav-link.active', function(){
$('.tab-content').slideToggle("slow");
});.tab-pane{
background-color:red;
padding-top:50px;
padding-bottom:50px;
}
.tab-content{
background-color:#ccc;
padding-top:10px;
padding-bottom:10px;
}