<!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>