JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

 更新时间:2019年07月11日 10:55:50   作者:webbc   我要评论

这篇文章主要介绍了JavaScript表格隔行变色和Tab标签页特效,结合实例形式分析了javascript元素遍历、事件响应相关操作技巧,并附带jQuery对应实现代码供大家参考,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • JavaScript 中文转拼音实现代码 有些bug

    JavaScript 中文转拼音实现代码 有些bug

    在做项目时候遇到一个小小的显示客户部门名称(拼音)的业务,就是在部门名称下有相应的拼音,而在现有的金沙国际官网中没有相应字段,并且部门数量比较多,添加起来比较费时,就想能否在js中实现,在页面中处理。
    2010-03-03
  • 基于javascript实现图片切换效果

    基于javascript实现图片切换效果

    这篇文章主要介绍了基于javascript实现图片切换效果的相关资料,需要的朋友可以参考下
    2016-04-04
  • JavaScript 基础表单验证示例(纯Js实现)

    JavaScript 基础表单验证示例(纯Js实现)

    下面小编就为大家带来一篇JavaScript 基础表单验证示例(纯Js实现)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • HTML中不支持静态Expando的元素的问题

    HTML中不支持静态Expando的元素的问题

    HTML中不支持静态Expando的元素的问题...
    2007-03-03
  • 学习Bootstrap滚动监听 附调用方法

    学习Bootstrap滚动监听 附调用方法

    这篇文章主要为大家全面解析Bootstrap中滚动监听的使用方法,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • Firefox div高度自适应

    Firefox div高度自适应

    IE不管设置div的高度与否,都会根据内容来自适应高度。但是FIrefox就没有这么聪明了。
    2009-04-04
  • js遍历获取表格内数据的方法(必看)

    js遍历获取表格内数据的方法(必看)

    下面小编就为大家带来一篇js遍历获取表格内数据的方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • avalonjs制作响应式瀑布流特效

    avalonjs制作响应式瀑布流特效

    瀑布流主要应用在图片展示页面上。如果有一大批图片需要展示,原始图片尺寸不一致,又希望每张图片都能不剪裁,完整显示,那么就要给图片规定一个宽度,解放它们的高度。利用网页高度不限这个特性,充分利用页面的空间,尽可能的展示多的图片。下面我们就来详细探讨下
    2015-05-05
  • JS获取图片高度宽度的方法分享

    JS获取图片高度宽度的方法分享

    这篇文章主要介绍了JS获取图片高度宽度的方法,开始的时候没能做到兼容chrome,在度娘和众网友的帮助下,最终完成了完美兼容,这里分享给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • javascript中return,return true,return false三者的用法及区别

    javascript中return,return true,return false三者的用法及区别

    这篇文章主要介绍了javascript中return,return true,return false三者的用法及区别的相关资料,需要的朋友可以参考下
    2015-11-11

最新评论