<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>多选项卡切换原理</title>
<meta name="keywords" content="" />
<script type="text/javascript" src="../jquery-1.8.2.js"></script>
<style type="text/css">
#main{width:500px;height:200px;font-size:12px;color:#000000;}
#main #tagsBox{margin-left:10px;}
#main #tagsBox h3{width:80px; height:25px; background:#C1D8ED; text-align:center; line-height:25px; float:left; margin:0px 2px 0px 0px;}
#main #tagsBox h3 a{color:#666666; text-decoration:none;}
#main #tagsBox .selectedTagCls{background:#8BBCE5;}
#main #tagsBox .itemTitle{color:#000000;}
#main #contentBox{width:500px; height:175px; float:left; background:#8BBCE5; overflow-y:auto;}
</style>
<script type="text/javascript">
$(function(){
//初始先加载第一个选项内容
$('#content').load($('#main #tagsBox h3:eq(0) a:eq(0)').attr('href'));
//如果遇到被点击情况，返回false
$('#main #tagsBox h3').click(function(){
return false;
});
//下面对选项卡鼠标移入样式控制
$('#main #tagsBox h3').mouseover(function(){
var thisObj = $(this); //当前选项卡对象
var thisClass = thisObj.attr('class'); //当前对象的class值
if(thisClass == 'selectedTagCls'){
return false; //如果当前选项卡已经选中，重复选中无效
}
//下面将当前选中的选项卡，背景轮换样式：给定选中的class，同胞的其它选项卡移除特定的class
thisObj.addClass('selectedTagCls').siblings('h3').removeClass('selectedTagCls');
//下面两行对选项卡标题颜色轮换样式
thisObj.children('a[class!="itemTitle"]').addClass('itemTitle');
thisObj.siblings('h3').children('a[class="itemTitle"]').removeClass('itemTitle');
//////////////////////////////////////////////////////////////
//下面动态载入内容
$('#content').stop();
$('#content').fadeOut('fast',function(){
$('#content').load($('a:eq(0)',thisObj).attr('href')).fadeIn('fast');
});
});
});
</script>
</head>
<body>
<div id="main">
<div id="tagsBox">
<h3 class="selectedTagCls"><a href="card.php?cid=1" class="itemTitle">第一项</a></h3>
<h3><a href="card.php?cid=2">第二项</a></h3>
<h3><a href="card.php?cid=3">第三项</a></h3>
</div>
<div id="contentBox">
<div id="content"></div>
</div>
</div>
</body>
</html>
