首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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

Posted in jQuery onJuly 11, 2019

本文实例讲述了JavaScript表格隔行变色和Tab标签页特效。分享给大家供大家参考，具体如下：

最近一直在看JavaScript知识，偶尔也穿插一点Jquery，感觉Jquery用起来真爽，减少了很多的代码量，而且学习也不是很高。接下来给大家分享两个小的特效，表格隔行变色和Tab标签页，大家来体会一下。

表格隔行变色

效果图：

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

原生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标签页

效果图

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

原生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.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

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

- Author -

webbc

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 #jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 #jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 #jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 #jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 #jQuery
jQuery属性选择器用法实例分析
Jun 28 #jQuery
Navigator(1) 数据重复(1) Pool(1) Apache(17) Hudi(1) WebSockets(3) feDisplacementMap(1) sortInts(1) Tkinter(4) Flutter(2)
You might like
利用“多说”制作留言板、评论系统
2015/07/14 PHP
设定php简写功能的方法
2019/11/28 PHP
Convert Seconds To Hours
2007/06/16 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
请解释一下webService？ 如何用.net实现webService
2014/06/09 面试题
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
大学生活自我评价
2014/04/09 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
2014年除四害工作总结
2014/12/06 职场文书
学习雷锋主题班会
2015/08/14 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL