在菜单"我们的工作",点击标签" Title1,2"标签菜单正在隐藏。我做错了什么?
的完整代码Jquery的:
$(function () {
var tabs = $('.tabs');
$('.tab').hide();
tabs.find('a').on('click', function (e) {
e.preventDefault();
tabs.find('.active').removeClass('active');
$(this).addClass('active');
$(this.hash).show().siblings().hide();
}).first().click();
//Show Menu
$('#show-about-btn').click(function () {
$('#show-about-btn').html("▼");
if ($('.menu-nav').css('display') == 'none') {
$('.menu-nav').slideDown("fast");
} else {
$('.menu-nav').slideUp("fast");
$('#show-about-btn').html("▲");
};
});
$(".our-work").click(function () {
if ($('.work-wrap').css('display') == 'none') {
$(".work-wrap").slideDown("fast");
} else {
$(".work-wrap").slideUp("fast");
};
});
});
答案 0 :(得分:1)
通过检查CSS,您将不必要地复杂化。你可以做这样简单的事情(请单独查看 jQuery代码):
$(function () {
$('ul.tabs li:first-child').addClass('active');
$('.block article').hide();
$('.block article:first-child').show();
$('ul.tabs li').on('click', function () {
$(this).closest(".tabs").find("li").removeClass('active');
$(this).addClass('active')
$('.block article').hide();
var activeTab = $(this).find('a').attr('href');
$(activeTab).show();
return false;
});
});
@import url("http://getbootstrap.com/dist/css/bootstrap.min.css");
.wrapper {
background: white;
margin: auto;
padding: 0em;
width: 100%;
}
ul.tabs {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.tabs li {
border: gray solid 1px;
border-bottom: none;
float: left;
margin: 0 .25em 0 0;
padding: .25em .5em;
}
ul.tabs li a {
color: black;
font-weight: bold;
text-decoration: none;
}
ul.tabs li.active {
background: #2fa4e7;
}
ul.tabs li.active a {
color: white;
}
.clr {
clear: both;
width: 100%;
}
article {
border-top: gray solid 1px;
padding: 0 0em;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row" id="dvMain">
<form method="post" id="SearchForm" class="form-horizontal">
<div class="col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-primary" id="divSearch">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseSearch">
Student Search
</a>
</h4>
</div>
<div id="collapseMainSearch" class="panel-body panel-collapse collapse in">
<section class="wrapper">
<ul class="tabs">
<li id="first"><a href="#MainS">Main Search</a></li>
<li><a href="#ACSS">Academic Search</a></li>
<li><a href="#AttS">Attendance Search</a></li>
</ul>
<div class="clr"></div>
<section class="block">
<article id="MainS">
Main search
</article>
<article id="ACSS">
Academic serach
</article>
<article id="AttS">
Attendance serach
</article>
<article id="StaS">
status serach
</article>
</section>
</section>
</div>
</div>
</div>
<div id="divSecondPanel" class="col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-primary" id="divDashboard">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseDashboard">
Dashboard
</a>
</h4>
</div>
<div id="collapseDashboard" class="panel-body panel-collapse collapse in">
<section class="wrapper">
<ul class="tabs">
<li id="second"><a href="#tab1">Students by Division</a></li>
<li><a href="#tab2">Students by Campus</a></li>
<li><a href="#tab3">Students by Level</a></li>
</ul>
<div class="clr"></div>
<section class="block">
<article id="tab1">
division
</article>
<article id="tab2">
campus
</article>
<article id="tab3">
level
</article>
</section>
</section>
</div>
</div>
</form>
</div>
</div>