javascript之通用简单的table选项卡实现(二)
回归原始，当样式切换后，把控制权还给页面，即table.js仅控制切换样式和记录操作：
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style type="text/css">
.sidebar {
width: 140px;
background: #C9E4D6;
min-height: 600px;
float: left;
border-left: solid 1px #C8C8C8;
}
.sidebar ul {
list-style:none;
text-align: left;
padding: 20px 0px 0px 0px;
}
.sidebar ul li {
border-bottom: 1px dotted #C8C8C8;
font-size: 14px;
height: 30px;
line-height: 30px;
padding-left: 15px;
margin-left: 15px;
cursor: pointer;
}
.sidebar .active {
background: #fff;
}
.content{
height:600px;
width:400px;
border-right:1px solid #ccc;
margin-left:140px;
padding:20px;
display:none;
}
</style>
</head>
<body>
<div class="sidebar" id="sidebar">
<ul>
<li point="table1">
选项一
</li>
<li point="table2">
选项二
</li>
<li point="table3">
选项三
</li>
<li point="table4">
选项四
</li>
<li point="table5">
选项五
</li>
</ul>
</div>
<div id="table1" class="content">
这是第一个选项卡的内容
</div>
<div id="table2" class="content">
这是第二个选项卡的内容
</div>
<div id="table3" class="content">
这是第三个选项卡的内容
</div>
<div id="table4" class="content">
这是第四个选项卡的内容
</div>
<div id="table5" class="content">
这是第五个选项卡的内容
</div>
</body>
<script type="text/javascript" src="table.js"> </script>
<script type="text/javascript">
//回调函数 可用参数：obj.lastIndex(上次选项索引) obj.index(当前选项索引) obj.arr(选项卡元素数组)
var back=function(obj)
{
var lastPoint=obj.arr[obj.lastIndex].getAttribute("point");
var curentPoint=obj.arr[obj.index].getAttribute("point");
document.getElementById(lastPoint).style.display="none";
document.getElementById(curentPoint).style.display="block";
}
//参数分别为：选项块ID 选中的样式 回调函数 默认选择项（0开始）
table("sidebar", "active",back,0);
</script>
</html>
//回调函数 可用参数：obj.lastIndex(上次选项索引) obj.index(当前选项索引) obj.arr(选项卡元素数组)
var back=function(obj)
{
var lastPoint=obj.arr[obj.lastIndex].getAttribute("point");
var curentPoint=obj.arr[obj.index].getAttribute("point");
document.getElementById(lastPoint).style.display="none";
document.getElementById(curentPoint).style.display="block";
}
//参数分别为：选项块ID 选中的样式 回调函数 默认选择项（0开始）
table("sidebar", "active",back,0);
/**
* @author Sky
*/
var table=function(id,active,callBack,index)
{
table[id]=new Table(id,active,callBack,index);
table[id].bind();
}
var Table=function(id,active,callBack,index)
{
this.index=parseInt(index)||0;//当前索引
this.lastIndex=this.index;//上次索引
this.callBack=callBack||function(){};
this.active=active||"active";
this.id=id;
this.arr=document.getElementById(id).getElementsByTagName("li");
}
Table.prototype={
bind:function()
{
//初始化选项样式
this.setTable(this.index);
//绑定事件
var _self=this;
for (var i = 0; i < this.arr.length; i++)
{
this.arr[i].setAttribute("extatt", i);//钩子
this.arr[i].onclick = function(e)
{
var _e = window.event||e;
var _target=_e.srcElement || _e.target;
_self.setTable(parseInt(_target.getAttribute("extatt")));
}
}
},
setTable:function(index)
{
this.lastIndex=this.index;
this.index=index;
//清除之前选项的样式
this.arr[this.lastIndex].className="";
//激活当前选项的样式
this.arr[this.index].className=this.active;
//执行回调函数
this.callBack(table[this.id]);
}
}
相关推荐
-
javascript 定时自动切换的选项卡Tab
这里要注意,用于产生changeTabInterval的随机数,防止页面上TabPane过多,如果设置的changeTabInterval都一样的话会产生整齐划一的切换的效果,不美观. 自动切换Tab选项卡 function randint(m,n)//产生m-n之间的随机整数 { return Math.random()*(n-m)+m; } function IfNull(a,dv) { return typeof(a) =="undefined"?dv:a; } var TabP
-
javascript+css 新闻显示tab 选项卡效果
我们_新闻显示选项卡效果(javascript+css) 新闻排行 国内 国际 社会 网评 新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河 最高法:承诺不判赖昌星死刑没有超越法律程序 物权法:满70年住宅建设用地使用权将自动续期 弟弟被妻下药毒死男子买女尸为其配阴婚(图) 揭开郑州神枪手神秘面纱 头号狙击手是近视眼 美军高官:不排除和中国发生直接军事对抗可能 浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕 西方炒作"中国航母威胁论"称05年已正式服役 女孩生活无法自理请人大代表递交安乐死议案 建
-
js实现tab选项卡函数代码
* { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-b
-
纯php打造的tab选项卡效果代码(不用js)
1.根据get判断,获取get生成css 复制代码 代码如下: <style type="text/css"> <?php if(!isset($_GET['city_id'])) { $city_id = 12; } else { $city_id = $_GET['city_id']; } echo '.a'.$city_id.' { color:red; } '; for($i=12;$i<=16;$i++) { if($i != $city_id) {
-
javascript 通用简单的table选项卡实现
第一步:引用table.js 复制代码 代码如下: <script type="text/javascript" src="table.js"> </script> 第二步:定义选中的样式,比如"active",应用选项卡的块的ID,比如"sidebar",默认被选中的序号,比如第一个"0": 第三步:调用函数: 复制代码 代码如下: <script type="te
-
跨浏览器通用、可重用的选项卡tab切换js代码
由于近来学了点js,于是我装逼道...不太难吧...就切一下display属性?同学无视我..说要搞个通用的...什么还要跟ajax交互..???我愣是没有听懂...到底要搞什么...权当作练手,我自己胡弄了一个. 需求:同学口中的通用我不知道神马意思...那我就按自己的理解吧.. ①跨浏览器,IE6+,FF,Chrome,Safari,Opera ②同一个页面可以用同一个js设置不同的选项卡. 说太多没啥米用,来看代码吧. 一.html部分(其实这还没啥好看的,设置了三个,前两个是一样的,通过
-
javascript实现tabs选项卡切换效果(自写原生js)
现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下: html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</
-
4种JavaScript实现简单tab选项卡切换的方法
本文实例讲解了4种JavaScript实现简单tab选项卡切换的方法,分享给大家供大家参考,具体内容如下 效果图: 方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换</title> <style type="text/cs
-
Javascript 自适应高度的Tab选项卡
JS部分具体的代码如下: 复制代码 代码如下: var getSiblingNode=function(className,elAr,el,not){ className=" "+className+" "; var Arr=[]; for(var i=0,l=elAr.length;i<l;i++){ if(elAr[i]!=el&&(elAr[i].nodeType===1)&&(" "+elAr[i].
-
js tab 选项卡
一般需要事先写好css样式等function tab(sId) { var tabs = document.getElementsByTagName("H2"); var boxs = document.getElementsByTagName("h3"); if ( boxs[sId].style.display=="block"){ boxs[sId].style.display="none"; tabs[sId].sty