溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JavaScript表格隔行變色和Tab標簽頁特效。分享給大家供大家參考，具體如下：
最近一直在看JavaScript知識，偶爾也穿插一點Jquery，感覺Jquery用起來真爽，減少了很多的代碼量，而且學習也不是很高。接下來給大家分享兩個小的特效，表格隔行變色和Tab標簽頁，大家來體會一下。
表格隔行變色
效果圖：
原生Js實現代碼：
<!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>
實現的思路比較簡單，首先獲取頁面中的tr對象，然后遍歷所有對象，分析是單行還是雙行，給不同的行添加顏色。
Jquery實現代碼：
<!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>
大家看到沒，Jquery只用到了一句話，就完成了工作。
Tab標簽頁
效果圖
原生Js實現代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js實現tab標簽頁</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標簽
var content = document.getElementById('content');
var div = content.getElementsByTagName('div');//獲取div標簽
//循環所有的li對象
for(var i=0;i<li.length;i++){
li[i].index = i;//把循環遍歷保存到當前的li對象中
//給每個li對象添加點擊事件
li[i].onclick = function(){
//再次循環所有的li對象
for(var j=0;j<li.length;j++){
li[j].className = '';//給li對象取消class屬性
div[j].style.display = 'none';//給div屬性隱藏
}
this.className = 'current';//給當前點擊的li添加class屬性
div[this.index].style.display = 'block';//將對應的div對象顯示出來
}
}
</script>
</html>
實現的思路也比較簡單，首先給第一個li標簽添加背景，然后讓對應的div標簽顯示出來，讓其余的div隱藏。然后每次點擊一個li標簽就把當前的li標簽添加上背景，讓其余的所有li標簽移除背景色，最后把相應的div標簽顯示出來就可以了。
jquery實現代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery實現tab標簽頁</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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
