Jquery简单Tabs选项卡

v5browser

浏览: 1138415 次

最近访客更多访客>>

ord2011

u012363178

sun_mingtao

raderp

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2013-07 ( 168)
2013-06 ( 142)
2013-05 ( 81)
更多存档...

好久没等csdn 自己搭了博客（www.yrzhll.com）,家里没网最近更新的比较少！上源码

<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style type="text/css">
*{margin:0px;padding:0px;}
body{background:#fff;}
.tabs{
width:500px;
height:500px;
margin:40px auto;
}
.head ul{}
.title{list-style:none;float:left;margin-right:4px;padding:0px;width:60px;height:24px;background:#777;color:#fff;font-weight:bold;line-height:24px;text-align:center;cursor:pointer;border-top:6px solid #fff;}
.title a{text-decoration:none;color:#fff;}
.tab_con{width:400px;height:300px;clear:both;}
.checked{border-top-width:6px;}
.hide{display:none;}
.tab_con{color:#fff;font-weight:bold;line-height:200px;text-align:center;font-size:30px;}
#tab_con1{background:#BD0A01;}
#tab_con2{background:#3E8064;}
#tab_con3{background:#8B4513;}
#tab_con4{background:#0078B6;}
</style>
</head>
<body>
<div id="tabs" class="tabs">
<div class="head">
<ul>
<li class="title checked" style="border-top-color:#BD0A01"><a href="#tab_con1">tab1</a></li>
<li class="title"><a href="#tab_con2">tab2</a></li>
<li class="title"><a href="#tab_con3">tab3</a></li>
<li class="title"><a href="#tab_con4">tab4</a></li>
</ul>
</div>
<div class="main" id="tab_con">
<div id="tab_con1" class="tab_con">content1</div>
<div id="tab_con2" class="tab_con hide">content2</div>
<div id="tab_con3" class="tab_con hide">content3</div>
<div id="tab_con4" class="tab_con hide">content4</div>
</div>
</div>
<script type="text/javascript">
function simpleTabs(navClass,conClass){
var _nav=navClass,_con=conClass;
$("."+_nav).bind("click",function(e){
e.preventDefault();
e.stopPropagation();
var id=$(this).find("a").attr("href");
var color=$(id).css("background-color");
$(this).addClass("checked").css("border-top-color",color);
$("."+_nav).not($(this)).removeClass("checked").css("border-top-color","#fff");
$(id).removeClass("hide").show();
$("."+_con).not(id).addClass("hide");
});
}
simpleTabs("title","tab_con");

</script>
</body>
</html>