您的位置：首页 > Web前端 > JavaScript

纯dom 选项卡js框架 -1

2012-09-24 23:42 141 查看
我写了个简单的选项卡框架 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 参见下篇文章
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航