亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

javascript 通用簡單的table選項卡實現(xiàn)

 更新時間：2010年05月07日 17:21:55   作者：  
鑒于UI妹妹每次交付過來的選項卡都夾帶了多多少少的js，而且每遇到選項卡就加一點js，造成垃圾低劣代碼逐漸堆積過多了，一直想做一個通用簡潔的選項卡庫。
第一步：引用table.js
復制代碼 代碼如下:
<script type="text/javascript" src="table.js"> </script>

第二步：定義選中的樣式，比如“active”，應(yīng)用選項卡的塊的ID，比如“sidebar”，默認被選中的序號，比如第一個“0”；
第三步：調(diào)用函數(shù)：
復制代碼 代碼如下:
<script type="text/javascript">
//參數(shù)分別為：默認選擇項 應(yīng)用塊的id 選中的樣式
table(0, "sidebar", "active")
</script>

一切OK，選項卡響應(yīng)click事件，兼任IE和FF，等有時間了再優(yōu)化，效果如下：

HTML源代碼如下：
復制代碼 代碼如下:

<!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>
<script type="text/javascript" src="table.js"> </script>
<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;
}
</style>
</head>
<body>
<div class="sidebar" id="sidebar">
<ul>
<li>
選項一
</li>
<li>
選項二
</li>
<li>
選項三
</li>
<li>
選項四
</li>
<li>
選項五
</li>
</ul>
</div>
</body>
<script type="text/javascript">
//參數(shù)分別為：默認選擇項 應(yīng)用塊的id 選中的樣式
table(0, "sidebar", "active")
</script>
</html>

table.js
復制代碼 代碼如下:

/**
* @author Sky
*/
var table=function(index,id,active)
{
table=new Table(index,id,active);
table.bind();
}
var Table=function(index,id,active)
{
this.index=parseInt(index);
this.arr=document.getElementById(id).getElementsByTagName("li");
this.active=active;
}
Table.prototype={
bind:function()
{
this.arr[this.index].className=this.active;//初始化
var _self=this;
for (var i = 0; i < this.arr.length; i++)
{
this.arr[i].setAttribute("ext", i);
this.arr[i].onclick = function(e)
{
var _e = window.event||e;
var _target=_e.srcElement || _e.target;
_self.setClass(parseInt(_target.getAttribute("ext")));
}
}
},
setClass:function(index)
{
this.arr[this.index].className="";
this.arr[index].className=this.active;
this.index=index;
}
}

DEMO下載

相關(guān)文章

  • JavaScript數(shù)組排序小程序?qū)崿F(xiàn)解析

    JavaScript數(shù)組排序小程序?qū)崿F(xiàn)解析

    這篇文章主要介紹了JavaScript數(shù)組排序小程序?qū)崿F(xiàn)解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-01-01
  • 判斷輸入的字符串是否是日期格式的簡單方法

    判斷輸入的字符串是否是日期格式的簡單方法

    下面小編就為大家?guī)硪黄猨s判斷輸入的字符串是否是日期格式的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-07
  • javascript實現(xiàn)在網(wǎng)頁中運行本地程序的方法

    javascript實現(xiàn)在網(wǎng)頁中運行本地程序的方法

    這篇文章主要介紹了javascript實現(xiàn)在網(wǎng)頁中運行本地程序的方法,實例分析了JavaScript基于ActiveXObject運行本地程序的技巧,需要的朋友可以參考下
    2016-02-02
  • JS原型鏈怎么理解

    JS原型鏈怎么理解

    本文重點給大家介紹javascript中的原型鏈知識，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看下吧
    2016-06-06
  • 使用selenium抓取淘寶的商品信息實例

    使用selenium抓取淘寶的商品信息實例

    下面小編就為大家分享一篇使用selenium抓取淘寶的商品信息實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • JavaScript參數(shù)個數(shù)可變的函數(shù)舉例說明

    JavaScript參數(shù)個數(shù)可變的函數(shù)舉例說明

    JavaScript允許一個函數(shù)傳遞個數(shù)可變的參數(shù)，因為有arguments這個內(nèi)置對象，它一個函數(shù)傳遞的所有參數(shù)的數(shù)組
    2014-10-10
  • 微信小程序?qū)嵱么a段(收藏版)

    微信小程序?qū)嵱么a段(收藏版)

    這篇文章主要介紹了微信小程序?qū)嵱么a段，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-12-12
  • 情人節(jié)專屬 純js腳本1k大小的3D玫瑰效果

    情人節(jié)專屬 純js腳本1k大小的3D玫瑰效果

    用代碼做出的玫瑰花，這才是牛逼程序員送給女友的最好情人節(jié)禮物呢
    2012-02-02
  • JavaScript原型對象原理與應(yīng)用分析

    JavaScript原型對象原理與應(yīng)用分析

    這篇文章主要介紹了JavaScript原型對象原理與應(yīng)用,結(jié)合實例形式分析了javascript原型對象的概念、原理、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下
    2018-12-12
  • javascript中的五種基本數(shù)據(jù)類型

    javascript中的五種基本數(shù)據(jù)類型

    在javascript中申明變量使用的關(guān)鍵字都是var，這點與其他的編程語言不盡相同，但是javascript亦含有五種基本的數(shù)據(jù)類型（也可以說是簡單數(shù)據(jù)類型），它們分別是：Undefined，Null，Boolean，Number和String。還含有一種復雜數(shù)據(jù)類型—Object。這里我們不談復雜數(shù)據(jù)類型
    2015-08-08

最新評論