我有三个嵌套标签,我需要以下内容:
当鼠标 悬停在其中一个非活动标签上时,活动标签应采用与其他(非活动)标签相同的非突出显示格式
<!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>REPORT TITLE</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--- Main tab functionality --->
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
<!--- Site/sub tab functionality --->
$(document).ready(function() {
$(".sub_content").hide();
$(".sub_content:first").show();
$("ul.sub_tabs li").click(function() {
$("ul.sub_tabs li").removeClass("active_sub");
$(this).removeClass("inactive_sub");
$(this).addClass("active_sub");
$("ul.sub_tabs li").not(".active_sub").addClass("inactive_sub");
$(".sub_content").hide();
var activeSubTab = $(this).attr("rel");
$("#"+activeSubTab).fadeIn();
});
});
$(document).ready(function(){
$('.inactive_sub').hover(function(){
$('.active_sub').toggleClass("active_deselect");
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>REPORT</h1>
<ul class="tabs">
<li class="active" rel="tab1">BY CYCLE</li>
<li rel="tab2">BY MONTH</li>
<li rel="tab3">SUMMARY</li>
</ul>
<div id="tab1" class="tab_content">
<br /><br />
<ul class="sub_tabs">
<li class="active_sub" rel="sub1">UTAH</li>
<li rel="sub2">ARIZONA</li>
<li rel="sub3">OHIO</li>
</ul>
<br />
<div id="sub1" class="sub_content">
S1
</div>
<div id="sub2" class="sub_content">
S2
</div>
<div id="sub3" class="sub_content">
S3
</div>
</div>
<div id="tab2" class="tab_content">
<br />
<p>T2</p>
</div>
<div id="tab3" class="tab_content">
<br />
<p>T3</p>
</div>
</div>
</body>
</html>
/* RELATED CSS */
ul.sub_tabs {
margin: 0;
padding: 0;
float: left;
width: 100%;
}
ul.sub_tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 21px ;
width: 294px;
font-weight: bold;
background: #EEEEEE;
overflow: hidden;
position: relative;
text-align: center;
vertical-align: middle;
font-size: 1.5em;
letter-spacing: 2px;
line-height: 60px;
}
ul.sub_tabs li:hover {
background: #FF9912;
color: white;
}
ul.sub_tabs li.active_sub{
background: #FF9912;
color: white;
}
ul.sub_tabs li.active_deselect{
background: #EEEEEE;
color: black;
}
.sub_content {
border-top: none;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
text-align: center;
}
sub_wrap {
border: 1px solid #999999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}