欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript表格隔行變色和Tab標簽頁特效示例【附j(luò)Query版】

 更新時間：2019年07月11日 10:55:50   作者：webbc  
這篇文章主要介紹了JavaScript表格隔行變色和Tab標簽頁特效,結(jié)合實例形式分析了javascript元素遍歷、事件響應(yīng)相關(guān)操作技巧,并附帶jQuery對應(yīng)實現(xiàn)代碼供大家參考,需要的朋友可以參考下

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

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

表格隔行變色

效果圖：

原生Js實現(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>

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

Jquery實現(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標簽頁

效果圖

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>原生js實現(xiàn)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標簽
  //循環(huán)所有的li對象
  for(var i=0;i<li.length;i++){
    li[i].index = i;//把循環(huán)遍歷保存到當前的li對象中
    //給每個li對象添加點擊事件
    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';//給當前點擊的li添加class屬性
      div[this.index].style.display = 'block';//將對應(yīng)的div對象顯示出來
    }
  }
</script>
</html>

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

jquery實現(xiàn)代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery實現(xiàn)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測試上述代碼運行效果。

更多關(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è)計有所幫助。

相關(guān)文章

最新評論