我写了个简单的选项卡框架 dom.js 使用代码如下
<!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">
<!--先解析float overflow 定位 自身 颜色类 -->
*{margin:0px;padding:0px}
.tab{float:left; width:500px; height:300px;overflow:hidden;cursor:pointer;}
.tab ul{float:left;margin:0px;padding:0px;width:500px;list-style:none;}
.tab ul li { display:block;float:left;width:80px;background:#0099cc;margin:0 4px 0 0;font:12px/30px "宋体";text-align:center;border-top-left-radius: 10px;border-top-right-radius: 10px;
}
.tab .content{clear:both;float:left;width:500px;height:300px;border:1px solid green;background:blue;display:none}
.tab .selectedLi{background:#0FF;}
.tab div.selecteDiv{background:#0FF;display:block;}
</style>
<script type="text/javascript" src="dom.js"></script>
</head>
<body>
<div id="tab0" class="tab">
<!-dddd->
<ul id ="ul" class=''>
<!--默认显示的li 的class 定义->
<li class="selectedLi" >选项1</li><li >选项2</li>
<li >选项3</li>
<li >选项4</li>
<li >选项5</li>
</ul>
<!---默认显示的div 的class 定义->
<div class="content selecteDiv">内容1
</div>
<!--默认隐藏的div 的class 定义 --->
<div class="content">内容2</div><div class="content">内容3
<ul id ="ul">
<li class="selectedLi" >选项1</li>
<li >选项2</li>
<li >选项3</li>
<li >选项4</li>
<li >选项5</li>
<ul/>
</div>
<div class="content selecteDiv">
<div>11111111<li>xxxxxxx</li></div>
<div>11111111</div>
<div>11111111</div>
</div>
<div class="content">内容4</div>
<div class="content">内容5</div>
</div>
</body>
<script type="text/javascript">
window.onload =function (){
//调用传个元素id
dom.tabBind('tab0');}
</script>
</html>
效果如图
dom.js 参见下篇文章
134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
