JavaScript表格隔行變色和Tab標(biāo)簽頁特效示例【附j(luò)Query版】
更新時(shí)間：2019年07月11日 10:55:50 作者：webbc
這篇文章主要介紹了JavaScript表格隔行變色和Tab標(biāo)簽頁特效,結(jié)合實(shí)例形式分析了javascript元素遍歷、事件響應(yīng)相關(guān)操作技巧,并附帶jQuery對應(yīng)實(shí)現(xiàn)代碼供大家參考,需要的朋友可以參考下
本文實(shí)例講述了JavaScript表格隔行變色和Tab標(biāo)簽頁特效。分享給大家供大家參考，具體如下：
最近一直在看JavaScript知識，偶爾也穿插一點(diǎn)Jquery，感覺Jquery用起來真爽，減少了很多的代碼量，而且學(xué)習(xí)也不是很高。接下來給大家分享兩個(gè)小的特效，表格隔行變色和Tab標(biāo)簽頁，大家來體會一下。
表格隔行變色
效果圖：
原生Js實(shí)現(xiàn)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js表格隔行變色</title>
<style>
#table{
width:500px;
border:1px solid red;
border-collapse: collapse;
}
#table td{
border:1px solid red;
}
</style>
<script>
window.onload = function(){
var tr = document.getElementsByTagName('tr');
for(var i=0;i<tr.length;i++){
if(i % 2 == 0){
tr[i].style.background = 'blue';
}else{
tr[i].style.background = 'yellow';
}
}
}
</script>
</head>
<body>
<table id="table">
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td>44444</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td>44444</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td>44444</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td>44444</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td>44444</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
</table>
</body>
</html>
實(shí)現(xiàn)的思路比較簡單，首先獲取頁面中的tr對象，然后遍歷所有對象，分析是單行還是雙行，給不同的行添加顏色。
Jquery實(shí)現(xiàn)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery表格隔行變色</title>
<style>
#table{
width:500px;
border:1px solid red;
border-collapse: collapse;
}
#table td{
border:1px solid red;
}
</style>
<script src="jquery.js"></script>
<script>
$(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');
});
</script>
</head>
<body>
<table id="table">
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td>44444</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td>44444</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td>44444</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td>44444</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td>44444</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
</table>
</body>
</html>
大家看到?jīng)]，Jquery只用到了一句話，就完成了工作。
Tab標(biāo)簽頁
效果圖
原生Js實(shí)現(xiàn)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js實(shí)現(xiàn)tab標(biāo)簽頁</title>
<style>
*{
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;
}
</style>
</head>
<body>
<ul id="nav">
<li class="current">php</li>
<li>ruby</li>
<li>python</li>
</ul>
<div id="content">
<div class="show">php.........介紹</div>
<div>ruby.........介紹</div>
<div>python.........介紹</div>
</div>
</body>
<script>
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對象
for(var i=0;i<li.length;i++){
li[i].index = i;//把循環(huán)遍歷保存到當(dāng)前的li對象中
//給每個(gè)li對象添加點(diǎn)擊事件
li[i].onclick = function(){
//再次循環(huán)所有的li對象
for(var j=0;j<li.length;j++){
li[j].className = '';//給li對象取消class屬性
div[j].style.display = 'none';//給div屬性隱藏
}
this.className = 'current';//給當(dāng)前點(diǎn)擊的li添加class屬性
div[this.index].style.display = 'block';//將對應(yīng)的div對象顯示出來
}
}
</script>
</html>
實(shí)現(xiàn)的思路也比較簡單，首先給第一個(gè)li標(biāo)簽添加背景，然后讓對應(yīng)的div標(biāo)簽顯示出來，讓其余的div隱藏。然后每次點(diǎn)擊一個(gè)li標(biāo)簽就把當(dāng)前的li標(biāo)簽添加上背景，讓其余的所有l(wèi)i標(biāo)簽移除背景色，最后把相應(yīng)的div標(biāo)簽顯示出來就可以了。
jquery實(shí)現(xiàn)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery實(shí)現(xiàn)tab標(biāo)簽頁</title>
<script src="jquery.js"></script>
<style>
*{
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;
}
</style>
</head>
<body>
<ul id="nav">
<li class="current">php</li>
<li>ruby</li>
<li>python</li>
</ul>
<div id="content">
<div class="show">php.........介紹</div>
<div>ruby.........介紹</div>
<div>python.........介紹</div>
</div>
</body>
<script>
$(function(){
$('#nav>li').click(function(){
$(this).addClass('current').siblings().removeClass('current');
$('#content>div').eq($(this).index()).show().siblings().hide();
});
})
</script>
</html>
思路和上面的一樣，看看代碼，只有2行，這就是Jquery的神奇之處。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS控制表格隔行變色
- 原生JS操作網(wǎng)頁給p元素添加onclick事件及表格隔行變色
- javascript實(shí)現(xiàn)table表格隔行變色的方法
- 高效的表格行背景隔行變色及選定高亮的JS代碼
- javascript表格隔行變色加鼠標(biāo)移入移出及點(diǎn)擊效果的方法
- JavaScript實(shí)現(xiàn)的斑馬線表格效果【隔行變色】
- 純css+js寫的一個(gè)簡單的tab標(biāo)簽頁帶樣式
- 最簡單純JavaScript實(shí)現(xiàn)Tab標(biāo)簽頁切換的方式(推薦)
- js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁功能的方法
- js封裝tab標(biāo)簽頁實(shí)例分享
- JavaScript實(shí)現(xiàn)的原生態(tài)Tab標(biāo)簽頁功能【兼容IE6】
相關(guān)文章
這篇文章主要介紹了使用get方式提交表單在地址欄里面不顯示提交信息的相關(guān)資料,需要的朋友可以參考下2017-02-02
談?wù)勎覍avaScript中typeof和instanceof的深入理解
這次主要說說javascript的類型判斷函數(shù)typeof和判斷構(gòu)造函數(shù)原型instanceof的用法和注意的地方，對本文感興趣的朋友一起看看吧2015-12-12
Echarts動態(tài)加載多條折線圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了Echarts動態(tài)加載多條折線圖的實(shí)現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
JavaScript 解析數(shù)學(xué)表達(dá)式的過程詳解
這篇文章主要介紹了JavaScript 解析數(shù)學(xué)表達(dá)式的過程詳解,本文以一個(gè)的解題思路，來分享如何解決問題，解決的過程，可以作為解決工作中一般問題的通用思路，對js解析表達(dá)式相關(guān)知識感興趣的朋友一起看看吧2022-06-06
原生js實(shí)現(xiàn)tab選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)tab選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
深入解析JS實(shí)現(xiàn)3D標(biāo)簽云的原理與方法
這篇文章主要介紹了深入解析JS實(shí)現(xiàn)3D標(biāo)簽云的原理與方法,結(jié)合實(shí)例形式詳細(xì)分析了3D標(biāo)簽云原理、實(shí)現(xiàn)技巧與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-08-08
JavaScript利用虛擬列表實(shí)現(xiàn)高性能渲染數(shù)據(jù)詳解
在前文中我們提到可以使用時(shí)間分片的方式來對長列表進(jìn)行渲染，但這種方式更適用于列表項(xiàng)的DOM結(jié)構(gòu)十分簡單的情況，所以本文來講講如何使用虛擬列表的方式，來同時(shí)加載大量數(shù)據(jù)吧2023-05-05
Javascript遍歷Html Table示例(包括內(nèi)容和屬性值)
這篇文章主要介紹了Javascript如何遍歷Html Table(包括內(nèi)容和屬性值),需要的朋友可以參考下2014-07-07
本文主要介紹了JS中常用的四個(gè)基礎(chǔ)算法，主要介紹了冒泡排序，選擇排序，插入排序和快速排序這四種算法,需要的朋友可以參考下2023-05-05
D3.js實(shí)現(xiàn)散點(diǎn)圖和氣泡圖的方法詳解
這篇文章將會給大家介紹了另外兩種可視化圖表，利用D3.js實(shí)現(xiàn)散點(diǎn)圖和氣泡圖，文章通過多個(gè)方面介紹的非常詳細(xì)，下面來一起看看吧。2016-09-09