我有一个php页面，其中包含一个用于切换标签的手风琴菜单，我的第一个标签有表格（比如搜索表单）和一个动态添加内容的div（比如搜索结果）
当页面加载一切都很好但是当我导航到另一个标签时，它会在第一个标签后显示，而第一个标签不会淡出
谁能告诉我发生了什么事 提前谢谢这是我的HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ashtapathi</title>
<link rel="stylesheet" type="text/css" href="css/ahstapathi_style.css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script>
function show_category(str)
{
if(str=="")
{
document.getElementById("cat_select").innerHTML="";
return;
}
else
{
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("cat_select").innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("GET","admin/cat_select.php?q="+str,true);
xmlhttp.send();
}
}
function show_type(str)
{
if(str=="")
{
document.getElementById("type_select").innerHTML="";
return;
}
else
{
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("type_select").innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("GET","admin/type_select.php?q="+str,true);
xmlhttp.send();
}
}
function show_plan(str)
{
if(str=="")
{
document.getElementById("plan_select").innerHTML="";
return;
}
else
{
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("plan_select").innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("GET","admin/plan_select.php?q="+str,true);
xmlhttp.send();
}
}
function search_category(str)
{
if(str=="")
{
document.getElementById("search-result-area").innerHTML="";
return;
}
else
{
if(window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else
{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.onreadystatechange = function()
{
if(req.readyState == 4 && req.status == 200)
{
document.getElementById("search-result-area").innerHTML=req.responseText;
}
};
req.open("GET","search/category_search.php?q="+str,true);
req.send();
}
}
function search_type(str)
{
if(str=="")
{
document.getElementById("search-result-area").innerHTML="";
return;
}
else
{
if(window.XMLHttpRequest)
{
req1 = new XMLHttpRequest();
}
else
{
req1 = new ActiveXObject("Microsoft.XMLHTTP");
}
req1.onreadystatechange = function()
{
if(req1.readyState == 4 && req1.status == 200)
{
document.getElementById("search-result-area").innerHTML=req1.responseText;
}
};
req1.open("GET","search/type_search.php?q="+str,true);
req1.send();
}
}
function search_plan(str)
{
if(str=="")
{
document.getElementById("search-result-area").innerHTML="";
return;
}
else
{
if(window.XMLHttpRequest)
{
req2 = new XMLHttpRequest();
}
else
{
req2 = new ActiveXObject("Microsoft.XMLHTTP");
}
req2.onreadystatechange = function()
{
if(req2.readyState == 4 && req2.status == 200)
{
document.getElementById("search-result-area").innerHTML=req2.responseText;
}
};
req2.open("GET","search/plan_search.php?q="+str,true);
req2.send();
}
}
</script>
</head>
<body>
<?php
$mysqli = new mysqli("localhost","root","","flat");
$res=$mysqli->query("select * from floor where status = '1'");
?>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-4">
<?php require_once("includes/sidebar-accordion.php");?>
</div>
<div class="col-md-9 col-sm-8">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h1 align="center">Search</h1>
<div class="row" align="center">
<form class="form-inline form-search" role="form">
<div class="form-group">
<select class="form-control" onchange="show_category(this.value);search_category(this.value);">
<option>Select Floor</option>
<?php
while ($row=mysqli_fetch_array($res))
{
?>
<option value="<?php echo $row['f_id']; ?>">
<?php echo $row['f_name']; ?>
</option>
<?php
}
?>
</select>
</div>
<div class="form-group" id="cat_select">
<select class="form-control">
<option>Select Category</option>
</select>
</div>
<div class="form-group" id="type_select">
<select class="form-control">
<option>Select Type</option>
</select>
</div>
</form>
</div>
<div style="width:100%;" id="search-result-area">
<?php
$count=0;
$q_res=$mysqli->query("select * from floor where status = '1'");
while($row=mysqli_fetch_array($q_res))
{
if($count==3)
{
echo "</div>";
$count=0;
}
if($count==0)
{
echo "<div class=row>";
}
echo "<div class=col-sm-4>";
echo "<div class=search-list>";
echo "<h5>";
echo $row['f_name'];
echo "</h5>";
if($row['status']==1)
{
echo "<small class=text-success>";echo "Available";echo"</small>";
}
else
{
echo "<small class=text-danger>";echo "Available";echo"</small>";
}
echo "</div>";
echo "</div>";
$count++;
}
?>
</div>
</div>
<div class="tab-pane fade" id="tab2">
<h1>ios</h1>
</div>
<div class="tab-pane fade" id="tab3">
<h1>jmeter</h1>
</div>
<div class="tab-pane fade" id="tab4">
<h1>ejb</h1>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
这是我在我的页面中包含的accordin菜单（sidebar-accordion.php）
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse navbar-primary">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="sidebar">
<div class="nav">
<div class="panel-group navbar-collapse" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<span class="glyphicon glyphicon-folder-close"></span>
Content
</a>
</h4>
</div><!--class="panel-heading"-->
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tr>
<td>
<a href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-search"></span>Search</a>
</td>
</tr>
<tr>
<td>
<a href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-flash"></span>News</a>
</td>
</tr>
<tr>
<td>
<a href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-file"></span>Newsletters</a>
</td>
</tr>
<tr>
<td>
<a href="#tab4" data-toggle="tab"><span class="glyphicon glyphicon-comment"></span>Comments</a>
<span class="badge">42</span>
</td>
</tr>
</table>
</div><!--class="panel-body"-->
</div><!--id="collapseOne" class="panel-collapse collapse in"-->
</div><!--class="panel panel-default"-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<span class="glyphicon glyphicon-folder-close"></span>
Content
</a>
</h4>
</div><!--class="panel-heading"-->
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-pencil"></span>Articles</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-flash"></span>News</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-file"></span>Newsletters</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-comment"></span>Comments</a>
<span class="badge">42</span>
</td>
</tr>
</table>
</div><!--class="panel-body"-->
</div><!--id="collapseOne" class="panel-collapse collapse in"-->
</div><!--class="panel panel-default"-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
<span class="glyphicon glyphicon-folder-close"></span>
Content
</a>
</h4>
</div><!--class="panel-heading"-->
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-pencil"></span>Articles</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-flash"></span>News</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-file"></span>Newsletters</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-comment"></span>Comments</a>
<span class="badge">42</span>
</td>
</tr>
</table>
</div><!--class="panel-body"-->
</div><!--id="collapseOne" class="panel-collapse collapse in"-->
</div><!--class="panel panel-default"-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
<span class="glyphicon glyphicon-folder-close"></span>
Content
</a>
</h4>
</div><!--class="panel-heading"-->
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-pencil"></span>Articles</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-flash"></span>News</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-file"></span>Newsletters</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-comment"></span>Comments</a>
<span class="badge">42</span>
</td>
</tr>
</table>
</div><!--class="panel-body"-->
</div><!--id="collapseOne" class="panel-collapse collapse in"-->
</div><!--class="panel panel-default"-->
</div><!--class="panel-group" id="accordion"-->
</div>
</div>
</nav>
</div>
</div><!--row-->
css（style.css）
@charset "utf-8";
/* CSS Document */
.content
{
padding-top:20px;
}
.dynamic-content
{
padding-right:20px;
}
.content h1
{
text-align:center;
}
.dynamic-content form
{
padding:0px 15px !important;
}
.side-menu
{
background-color:#337ab7;
color:#FFF;
padding:10px 1px !important;
margin:0px;
}
@media(max-width:767px)
{
.side-menu
{
margin-left:-30px !important;
margin-right:-30px !important;
}
}
.side-menu .nav li a
{
color:#FFF !important;
background-color:337ab7 !important;
border-radius:0px;
margin:0px !important;
}
.side-menu .nav li a:hover,
.side-menu .nav li a:focus
{
color:#337ab7 !important;
background-color:#FFF !important;
}
.side-menu .navbar-collapse
{
padding:0px !important;
}
@media(max-width:767px)
{
.side-menu .navbar-collapse
{
margin-top:10px !important;
}
}
.side-menu .navbar-header .navbar-toggle
{
background-color:transparent;
margin:0px 10px;
padding:0px;
}
.side-menu .navbar-header .navbar-toggle .icon-bar
{
background-color:#FFF;
}
.navbar-primary
{
margin-top:15px !important;
margin-left:0px !important;
margin-right:0px !important;
min-height:30px !important;
}
@media(max-width:767px)
{
.navbar-primary
{
background-color:#222;
color:#9d9d9d;
margin-top:0px !important;
margin-left:-15px !important;
margin-right:-15px !important;
left:0 !important;
right:0 !important;
}
}
.navbar-primary .navbar-header .navbar-toggle
{
border:none;
padding:0px !important;
}
.navbar-primary .navbar-header .navbar-toggle:hover,
.navbar-primary .navbar-header .navbar-toggle:focus
{
background-color:transparent !important;
}
.navbar-primary .navbar-header .navbar-toggle .icon-bar
{
background-color:#9d9d9d;
max-height:2px;
height:2px;
margin:3px;
}
.navbar-primary .navbar-collapse
{
padding:0px !important;
}
.navbar-primary .navbar-collapse .panel-group
{
margin:0px;
padding:0px !important;
background-color:transparent;
color:#9d9d9d;
border:none !important;
}
.navbar-primary .navbar-collapse .panel-group .panel
{
border:none !important;
margin:0px !important;
background-color:transparent;
color:#9d9d9d;
}
.navbar-primary .navbar-collapse .panel-group .panel .panel-heading
{
background-color:transparent;
color:#9d9d9d;
border:none !important;
}
.navbar-primary .navbar-collapse .panel-group .panel .panel-heading a
{
text-decoration:none;
}
.navbar-primary .navbar-collapse .panel-group .panel .panel-heading a:hover,
.navbar-primary .navbar-collapse .panel-group .panel .panel-heading a:focus
{
color:#FFF;
}
.navbar-primary .navbar-collapse .panel-group .panel .panel-heading a .glyphicon
{
margin-right:10px;
}
.navbar-primary .navbar-collapse .panel-group .panel .panel-body
{
border-top:1px solid #555;
border-bottom:1px solid #555;
}
.navbar-primary .navbar-collapse .panel-group .panel .panel-body table
{
margin-bottom:0px;
}
.navbar-primary .navbar-collapse .panel-group .panel .panel-body table tr td
{
border:none;
}
.navbar-primary .navbar-collapse .panel-group .panel .panel-body table tr td a
{
background-color:transparent;
color:#9d9d9d !important;
text-decoration:none;
}
.navbar-primary .navbar-collapse .panel-group .panel .panel-body table tr td a .glyphicon
{
margin-right:10px;
}
.navbar-primary .navbar-collapse .panel-group .panel .panel-body table tr td a:hover,
.navbar-primary .navbar-collapse .panel-group .panel .panel-body table tr td a:focus
{
color:#FFF !important;
}
.form-search
{
width:100%;
margin-top:0px !important;
margin-bottom:20px !important;
margin-left:0px !important;
margin-right:0px !important;
}
@media(max-width:767px)
{
.form-search
{
padding-right:10px;
padding-left:10px;
margin-bottom:15px !important;
}
}
.form-search .form-group
{
width:30%;
}
@media(max-width:767px)
{
.form-search .form-group
{
width:100%;
}
}
.form-search .form-group .form-control
{
width:100%;
}
.btn-inverse
{
background-color:#222 !important;
color:#9d9d9d;
height:35px;
}
.btn-inverse:hover,
.btn-inverse:focus
{
color:#FFF !important;
}
.small-visible
{
display:none;
}
@media(max-width:767px)
{
.small-visible
{
display:inline-block;
}
}
#myTabContent .tab-pane
{
padding:0px !important;
}
@media(max-width:767px)
{
#myTabContent .tab-pane
{
padding-left:10px !important;
padding-right:10px !important;
}
}
.search-list
{
border:1px solid #222;
border-radius:5px;
margin:10px;
padding:10px;
}
@media(max-width:767px)
{
.search-list
{
margin-top:0px;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
}
}
.search-list h5
{
color:#222 !important;
font-weight:bold;
}
.search-list small.text-success
{
color:#090 !important;
font-weight:bold;
}
.search-list small.text-error
{
color:#F00 !important;
font-weight:bold;
}