选项卡的写作

<!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>无标题文档</title>
<style type="text/css">
body { margin:0;
font-family:微软雅黑;
font-size:14px;
color:#333;}

ul { margin:0;
list-style-type:none;
padding:0;}

a { color:#333;
text-decoration:none;}

.tab { border-bottom:2px solid #F00;
height:35px;
line-height:35px;
min-width:1100px;}

.tab ul { width:1100px;
margin:auto;}

.tab li { float:left;}

.select { background-color:#F00;
color:#FFF;
font-weight:bold;
border:none;}

.tab li a { width:90px;
height:34px;
margin:0;
display:inline-block;
text-align:center;
line-height:30px;}

.center { width:1100px;
margin:auto;}


</style>
<script type="text/javascript">
function Tab(a,n)
{
var arr=document.getElementsByTagName('a');
for(var i=0;i<arr.length;i++)
{
document.getElementById('div'+(i+1)).style.display='none';
arr[i].removeAttribute('class');
}
a.setAttribute('class','select');
document.getElementById('div'+n).style.display='block';
}
</script>
</head>

<body>
<div class="tab">
<ul>
<li><a href="http://www.fivegirls.cn/news/news5.html" class="select" onclick="Tab(this,1)" style="font-size:18px; font-weight:bold;">精选</a></li>
<li><a href="http://www.fivegirls.cn/news/news6.html" class="" onclick="Tab(this,2)">PLUS专区</a></li>
<li><a href="http://www.fivegirls.cn/news/news7.html" class="" onclick="Tab(this,3)" >手机数码</a></li>
<li><a href="http://www.fivegirls.cn/news/news8.html" class="" onclick="Tab(this,4)" >家用电器</a></li>
<li><a href="http://www.fivegirls.cn/news/news9.html" class="" onclick="Tab(this,5)" >食用饮料</a></li>
<li><a href="http://www.fivegirls.cn/news/news10.html" class="" onclick="Tab(this,6)" >母婴用品</a></li>
<li><a href="http://www.fivegirls.cn/news/news11.html" class="" onclick="Tab(this,7)" >电脑办公</a></li>
<li><a href="http://www.fivegirls.cn/news/news12.html" class="" onclick="Tab(this,8)" >服饰内衣</a></li>
<li><a href="http://www.fivegirls.cn/news/news13.html" class="" onclick="Tab(this,9)" >个性化妆</a></li>
<li><a href="http://www.fivegirls.cn/news/news14.html" class="" onclick="Tab(this,10)" >运动户外</a></li>
<li><a href="http://www.fivegirls.cn/news/news15.html" class="" onclick="Tab(this,11)" >全部分类</a></li>
</ul>
</div>

<div class="center">
<div id="div1">
sdfgdf
</div>
<div id="div2" style="display:none;">
广发华福苟富贵
</div>
<div id="div3" style="display:none;">
东方红风格化
</div>
<div id="div4" style="display:none;">
梵蒂冈很反感好
</div>
<div id="div5" style="display:none;">
东方红苟富贵好
</div>
<div id="div6" style="display:none;">
地方话佛光会
</div>
<div id="div7" style="display:none;">
风格化反规划
</div>
<div id="div8" style="display:none;">
发过火饭
</div>
<div id="div9" style="display:none;">
而已如啼眼
</div>
<div id="div10" style="display:none;">
连连看
</div>
<div id="div11" style="display:none;">
食人鱼
</div>
</div>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/jinxia/p/9105340.html