首页
所有分类
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图片放大镜效果
Jun 23 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jquery实现穿梭框功能
Jan 19 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
SandBox(1) cudn(1) webpack(1) RTX 3050 ti(1) OpenFeign(1) swing(1) Git(3) calc(1) K8s(1) Windows Server(4)
You might like
php生成静态页面的简单示例
2014/04/17 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
javascript 写类方式之九
2009/07/05 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
实例解析Array和String方法
2016/12/14 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
python基础教程之循环介绍
2014/08/29 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
python中文乱码不着急，先看懂字节和字符
2017/12/20 Python
使用requests库制作Python爬虫
2018/03/25 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Django视图类型总结
2021/02/17 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
松下电器美国官方商店：Panasonic美国
2016/10/14 全球购物
Android面试题附答案
2014/12/08 面试题
口头翻译求职人自荐信
2013/12/07 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
环保倡议书400字
2014/05/15 职场文书
学生通报表扬范文
2015/05/04 职场文书
摘录式读书笔记
2015/07/01 职场文书
安全教育主题班会总结
2015/08/14 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers