制作了一个仿淘宝的tab框
制作了一个仿淘宝的tab框 分享一下
最终果如图:
实现代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>吴蒋</title>
<link rel="stylesheet" type="text/css" href="tab.css">
</head>
<body>
<div id="tab">
<div id="tab_title">
<ul>
<li class="nc" id="li_tabs-1"><a href="#">公告</a></li>
<li class="nc" id="li_tabs-2"><a href="#">规则</a></li>
<li class="nc" id="li_tabs-3"><a href="#">安全中心</a></li>
<li class="nc" id="li_tabs-4"><a href="#">论坛</a></li>
<li class="nc" id="li_tabs-5"><a href="#">公益</a></li>
</ul>
</div>
<div id="tabs">
<div id="tabs-1" class="tabs" >
<p>公告内容1</p>
</div>
<div id="tabs-2" class="tabs">
<p>规则内容2</p>
</div>
<div id="tabs-3" class="tabs">
<p>安全内容3</p>
</div>
<div id="tabs-4" class="tabs">
<p>论坛内容4</p>
</div>
<div id="tabs-5" class="tabs">
<p>公益内容5</p>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$(".nc").mouseover(function(){
tabOperat(this);
});
$("#li_tabs-1").attr("class","oc");
$("#tabs-1").css("display","block");
})
function tabOperat(tabobj)
{
$(".oc").attr("class","nc");
$(".tabs").css("display","none");
$(tabobj).attr("class","oc");
$("#"+tabobj.id.split('_')[1]).css("display","block");
}
</script>
css代码:
* {
margin: 0px;
padding: 0px;
}
#tab {
width: 214px;
height: 500px;
clear: both;
border: 1px solid #d5d5d5;
font-size: 12px;
color:#3e3e3e;
clear: both;
}
#tab_title {
background-color: #eee;
width: 214px;
height: 30px;
border-bottom:1px solid #d5d5d5;
}
#tab ul {
padding: 5px;
width: 214px;
}
#tab ul li {
list-style-type: none;
float: left;
padding:2px 4px;
}
#tab a:link, a:visited
{
text-decoration:none;
color:#3e3e3e;
}
#tab a:hover,a:active
{
color:#894060;
text-decoration:underline;
}
.oc {
border:1px solid #d5d5d5;
height:21px;
border-bottom-style:none;
font-weight:bold;
background-color: #FFF;
}
.nc
{
display:block;
}
.tabs
{
padding:10px 6px;
float:left;
display:none;
}
来源 http://blog.csdn.net/wujiang1984/ http://www.cnblogs.com/wujiang
