<!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>tab切换</title>
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery-1.7.1.js"></script>
</head>
<body>
<div class="mainCotright">
<div class="tab">
<a class="tabcur" href="#">最新推荐</a>
<a href="#">读者推荐</a>
</div>
<div class="tabText">
<ul class="tabText1">
<li><b></b><a href="#">教育会交往心理云云学学习网开通</a></li>
<li><b></b><a href="#">学术论会交往心</a></li>
<li><b></b><a href="#">西方近现代史思</a></li>
<li><b></b><a href="#">学术论文的论文的的写作</a></li>
</ul>
<ul class="tabText2">
<li><b></b><a href="#">教育会交往心理云云学学习网开通</a></li>
<li><b></b><a href="#">学术论会交往心</a></li>
<li><b></b><a href="#">西方近现代史思</a></li>
<li><b></b><a href="#">学术论文的论文的的写作</a></li>
<li><b></b><a href="#">教育会交往心理云云学学习网</a></li>
</ul>
</div>
<div style="display:none;"class="tabText">
<ul class="tabText1">
<li><b></b><a href="#">教育会交dfdfdfdf网开通</a></li>
<li><b></b><a href="#">西方近现代史思心</a></li>
<li><b></b><a href="#">学术论会交往心</a></li>
<li><b></b><a href="#">学术论会交往心</a></li>
</ul>
<ul class="tabText2">
<li><b></b><a href="#">教育会交往心理云云学学习网</a></li>
<li><b></b><a href="#">教育会交往心理云云学学习网</a></li>
<li><b></b><a href="#">教育会交往心理云云学学习网</a></li>
<li><b></b><a href="#">教育会交往心理云云学学习网</a></li>
<li><b></b><a href="#">教育会交往心理云云学学习网</a></li>
</ul>
</div>
</div>
</body>
<script src="js/tabs.js"></script>
</html>
css样式
/*基本设置*/
body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/
div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/
ul,li,ol{list-style:none;}/*去除列表符号*/
img{border:none;}/*去除图片按钮边框*/
a{text-decoration:none;}/*去除超链接下划线*/
img,input,textarea{vertical-align:middle;}
.mainCotright{ width:240px; height:295px; background:#F1F1F1; margin:30px auto;}
.mainCotright .tab{ border-bottom:2px solid #c1d5e4; height:36px; line-height:36px;}
.mainCotright .tab a{ color:#1f2527; font-size:14px; font-family:"微软雅黑"; width:74px; display:block; float:left;text-align:center; margin-right:8px;}
.mainCotright .tab a.tabcur{ background:url(../images/linesanjiao.gif) bottom no-repeat; padding-bottom:5px;}
.mainCotright .tabText ul{ margin-top:5px;}
.mainCotright .tabText1{ border-bottom:1px dashed #d5d5d5; padding-bottom:9px;}
.mainCotright .tabText li{ line-height:25px; height:25px;}
.mainCotright .tabText li a{ color:#4a4a4a;}
.mainCotright .tabText li b{ margin:7px 7px 0 0; float:left; display:block;}
.mainCotright .tabText2 li b{ width:16px; height:13px; background:url(../images/cont.gif) -114px 0 no-repeat;}
.mainCotright .tabText1 li b{ width:16px; height:13px; background:url(../images/cont.gif) -96px 0 no-repeat;}
js效果
// JavaScript Document
$(document).ready(function(){
<!--nav下拉菜单-->
$(".submenu div a").mouseover(function(){
$(".submenu ul").show();
$(".submenu li a").addClass("submenuCur")
$(this).addClass("cur")
}).mouseout(function(){
$(".submenu li a").removeClass("submenuCur")
})
$(".submenu ul").mouseleave(function(){
$(this).hide();
$(".submenu div a").removeClass("cur")
})
$(".submenu div a em.jiantou").mouseout(function(){
$(".submenu ul").hide();
})
/*tab切换*/
// $(".tab a").click(function(){
// $(".tab a").removeClass("tabcur")
// $(this).addClass("tabcur")
// $(".tabText").hide();
// $(".tabText").eq($(".tab a").index(this)).show();
// return false;
// })
$(".tab a").click(function(){
//alert("hh")
$(".tab a").removeClass("tabcur")
$(this).addClass("tabcur")
$(".tabText").hide();
$(".tabText").eq($(".tab a").index(this)).show();
return false;
})
})
