首页
所有分类
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序列化后的表单值转换成Json
Jun 16 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery Validate格式验证功能实例代码（包括重名验证）
Jul 18 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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
77A(2) MOTOROLA(1) 单管机(1) 晶体管(2) 收信机(3) 音箱(1) BOSE(2) ICF-2010(1) 摩托罗拉(1) 耳机(1)
You might like
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
php通过各种函数判断0和空
2020/07/04 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
全面解析Bootstrap排版使用方法（文字样式）
2015/11/30 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
简单介绍Python中的几种数据类型
2016/01/02 Python
Python实现带百分比的进度条
2016/06/28 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
python使用folium库绘制地图点击框
2018/09/21 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
python将list转为matrix的方法
2018/12/12 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Python实现数据结构线性链表（单链表）算法示例
2019/05/04 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
java字符串格式化输出实例讲解
2021/01/06 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
俄罗斯名牌服装网上商店：UNIQUE FABRIC
2019/07/25 全球购物
德国旅行、体验和活动的预订平台：Watado
2019/12/04 全球购物
春节请假条
2014/04/11 职场文书
村级换届选举方案
2014/05/10 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
中学生思想品德评语
2014/12/31 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers