javascript之通用简单的table选项卡实现(二)
2024-05-06 14:10:08
供稿：网友
回归原始，当样式切换后，把控制权还给页面，即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");
