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

最近一直在看JavaScript知識，偶爾也穿插一點Jquery，感覺Jquery用起來真爽，減少了很多的代碼量，而且學習也不是很高。接下來給大家分享兩個小的特效，表格隔行變色和Tab標簽頁，大家來體會一下。

表格隔行變色

效果圖：

原生Js實現代碼：

原生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

實現的思路比較簡單，首先獲取頁面中的tr對象，然后遍歷所有對象，分析是單行還是雙行，給不同的行添加顏色。

Jquery實現代碼：

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

大家看到沒，Jquery只用到了一句話，就完成了工作。

Tab標簽頁

效果圖

原生Js實現代碼：

原生js實現tab標簽頁

*{

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標簽

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

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

//循環所有的li對象

for(var i=0;i

li[i].index = i;//把循環遍歷保存到當前的li對象中

//給每個li對象添加點擊事件

li[i].onclick = function(){

//再次循環所有的li對象

for(var j=0;j

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

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

}

this.className = 'current';//給當前點擊的li添加class屬性

div[this.index].style.display = 'block';//將對應的div對象顯示出來

}

}

實現的思路也比較簡單，首先給第一個li標簽添加背景，然后讓對應的div標簽顯示出來，讓其余的div隱藏。然后每次點擊一個li標簽就把當前的li標簽添加上背景，讓其余的所有li標簽移除背景色，最后把相應的div標簽顯示出來就可以了。

jquery實現代碼：

jquery實現tab標簽頁

*{

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代碼運行工具：http://tools.ddpool.cn/code/HtmlJsRun測試上述代碼運行效果。

希望本文所述對大家JavaScript程序設計有所幫助。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。