本文實(shí)例講述了JavaScript表格隔行變色和Tab標(biāo)簽頁(yè)特效。分享給大家供大家參考，具體如下：

最近一直在看JavaScript知識(shí)，偶爾也穿插一點(diǎn)Jquery，感覺(jué)Jquery用起來(lái)真爽，減少了很多的代碼量，而且學(xué)習(xí)也不是很高。接下來(lái)給大家分享兩個(gè)小的特效，表格隔行變色和Tab標(biāo)簽頁(yè)，大家來(lái)體會(huì)一下。

表格隔行變色

效果圖：

原生Js實(shí)現(xiàn)代碼：

原生js表格隔行變色

#table{

width:500px;

border:1px solid red;

border-collapse: collapse;

}

#table td{

border:1px solid red;

}

window.onload = function(){

var tr = document.getElementsByTagName('tr');

for(var i=0;i

if(i % 2 == 0){

tr[i].style.background = 'blue';

}else{

tr[i].style.background = 'yellow';

}

}

}

11111	22222	33333	44444
aaaaa	bbbbb	ccccc	ddddd
11111	22222	33333	44444
aaaaa	bbbbb	ccccc	ddddd
11111	22222	33333	44444
aaaaa	bbbbb	ccccc	ddddd
11111	22222	33333	44444
aaaaa	bbbbb	ccccc	ddddd
11111	22222	33333	44444
aaaaa	bbbbb	ccccc	ddddd

實(shí)現(xiàn)的思路比較簡(jiǎn)單，首先獲取頁(yè)面中的tr對(duì)象，然后遍歷所有對(duì)象，分析是單行還是雙行，給不同的行添加顏色。

Jquery實(shí)現(xiàn)代碼：

jquery表格隔行變色

#table{

width:500px;

border:1px solid red;

border-collapse: collapse;

}

#table td{

border:1px solid red;

}

$(function(){

// $('table tr:even').css('background','blue');

// $('table tr:odd').css('background','yellow');

$('table tr').filter(':even').css('background','blue').end().filter(':odd').css('background','yellow');

});

11111	22222	33333	44444
aaaaa	bbbbb	ccccc	ddddd
11111	22222	33333	44444
aaaaa	bbbbb	ccccc	ddddd
11111	22222	33333	44444
aaaaa	bbbbb	ccccc	ddddd
11111	22222	33333	44444
aaaaa	bbbbb	ccccc	ddddd
11111	22222	33333	44444
aaaaa	bbbbb	ccccc	ddddd

大家看到?jīng)]，Jquery只用到了一句話，就完成了工作。

Tab標(biāo)簽頁(yè)

效果圖

原生Js實(shí)現(xiàn)代碼：

原生js實(shí)現(xiàn)tab標(biāo)簽頁(yè)

*{

margin:0;

padding:0;

}

#nav{

list-style-type: none;

height:30px;

margin-bottom: 10px;

}

#nav li{

height:30px;

line-height: 30px;

float:left;

padding:0 15px;

border:1px solid blue;

margin-right: 3px;

}

#content{

width:300px;

height:200px;

border:1px solid blue;

}

#content div{

display: none;

}

body{

padding:40px;

}

#nav li.current{

background: red;

}

#content div.show{

display: block;

}

• php
• ruby
• python

php.........介紹ruby.........介紹python.........介紹

var ul = document.getElementById('nav');

var li = ul.getElementsByTagName('li');//獲取li標(biāo)簽

var content = document.getElementById('content');

var div = content.getElementsByTagName('div');//獲取div標(biāo)簽

//循環(huán)所有的li對(duì)象

for(var i=0;i

li[i].index = i;//把循環(huán)遍歷保存到當(dāng)前的li對(duì)象中

//給每個(gè)li對(duì)象添加點(diǎn)擊事件

li[i].onclick = function(){

//再次循環(huán)所有的li對(duì)象

for(var j=0;j

li[j].className = '';//給li對(duì)象取消class屬性

div[j].style.display = 'none';//給div屬性隱藏

}

this.className = 'current';//給當(dāng)前點(diǎn)擊的li添加class屬性

div[this.index].style.display = 'block';//將對(duì)應(yīng)的div對(duì)象顯示出來(lái)

}

}

實(shí)現(xiàn)的思路也比較簡(jiǎn)單，首先給第一個(gè)li標(biāo)簽添加背景，然后讓對(duì)應(yīng)的div標(biāo)簽顯示出來(lái)，讓其余的div隱藏。然后每次點(diǎn)擊一個(gè)li標(biāo)簽就把當(dāng)前的li標(biāo)簽添加上背景，讓其余的所有l(wèi)i標(biāo)簽移除背景色，最后把相應(yīng)的div標(biāo)簽顯示出來(lái)就可以了。

jquery實(shí)現(xiàn)代碼：

jquery實(shí)現(xiàn)tab標(biāo)簽頁(yè)

*{

margin:0;

padding:0;

}

#nav{

list-style-type: none;

height:30px;

margin-bottom: 10px;

}

#nav li{

height:30px;

line-height: 30px;

float:left;

padding:0 15px;

border:1px solid blue;

margin-right: 3px;

}

#content{

width:300px;

height:200px;

border:1px solid blue;

}

#content div{

display: none;

}

body{

padding:40px;

}

#nav li.current{

background: red;

}

#content div.show{

display: block;

}

• php
• ruby
• python

php.........介紹ruby.........介紹python.........介紹

$(function(){

$('#nav>li').click(function(){

$(this).addClass('current').siblings().removeClass('current');

$('#content>div').eq($(this).index()).show().siblings().hide();

});

})

思路和上面的一樣，看看代碼，只有2行，這就是Jquery的神奇之處。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.ddpool.cn/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。