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

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

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

表格隔行变色

效果图:

原生Js实现代码:

原生js表格隔行变色

#table{

width:500px;

border:1px solid red;

border-collapse: collapse;

}

#table td{

border:1px solid red;

}

window.onload = function(){

var tr = document.getElementsByTagName('tr');

for(var i=0;i

if(i % 2 == 0){

tr[i].style.background = 'blue';

}else{

tr[i].style.background = 'yellow';

}

}

}

11111222223333344444
aaaaabbbbbcccccddddd
11111222223333344444
aaaaabbbbbcccccddddd
11111222223333344444
aaaaabbbbbcccccddddd
11111222223333344444
aaaaabbbbbcccccddddd
11111222223333344444
aaaaabbbbbcccccddddd

实现的思路比较简单,首先获取页面中的tr对象,然后遍历所有对象,分析是单行还是双行,给不同的行添加颜色。

Jquery实现代码:

jquery表格隔行变色

#table{

width:500px;

border:1px solid red;

border-collapse: collapse;

}

#table td{

border:1px solid red;

}

$(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');

});

11111222223333344444
aaaaabbbbbcccccddddd
11111222223333344444
aaaaabbbbbcccccddddd
11111222223333344444
aaaaabbbbbcccccddddd
11111222223333344444
aaaaabbbbbcccccddddd
11111222223333344444
aaaaabbbbbcccccddddd

大家看到没,Jquery只用到了一句话,就完成了工作。

Tab标签页

效果图

原生Js实现代码:

原生js实现tab标签页

*{

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;

}

php.........介绍
ruby.........介绍
python.........介绍

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[i].index = i;//把循环遍历保存到当前的li对象中

//给每个li对象添加点击事件

li[i].onclick = function(){

//再次循环所有的li对象

for(var j=0;j

li[j].className = '';//给li对象取消class属性

div[j].style.display = 'none';//给div属性隐藏

}

this.className = 'current';//给当前点击的li添加class属性

div[this.index].style.display = 'block';//将对应的div对象显示出来

}

}

实现的思路也比较简单,首先给第一个li标签添加背景,然后让对应的div标签显示出来,让其余的div隐藏。然后每次点击一个li标签就把当前的li标签添加上背景,让其余的所有li标签移除背景色,最后把相应的div标签显示出来就可以了。

jquery实现代码:

jquery实现tab标签页

*{

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;

}

  • php
  • ruby
  • python
php.........介绍
ruby.........介绍
python.........介绍

$(function(){

$('#nav>li').click(function(){

$(this).addClass('current').siblings().removeClass('current');

$('#content>div').eq($(this).index()).show().siblings().hide();

});

})

思路和上面的一样,看看代码,只有2行,这就是Jquery的神奇之处。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.ddpool.cn/code/HtmlJsRun测试上述代码运行效果。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/429005.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PHP 递归删除目录中文件

/** * 递归删除目录中文件 * param $pathname * return bool */public static function delDir($pathname)//要删除的目录{ if(file_exists($pathname)) { if(is_file($pathname)) { unlink($pathname); } else { $dir opendir($pathn…

matlab 符号表达式 系数 小数,matlab符号表达式系数

1数学符号matlab符号表达式系数: 数学符号,缺失:matlab表达式系数2838/9数学符号归类,包含运算符号、比较符号、几何符号、代数符号、常用分数、积分等各种符号。数学符号﹢﹣/≌∽≦≧≒﹤﹥≈≡≠…

STM32视频教程《原子教你玩STM32》

源:STM32视频教程《原子教你玩STM32》转载于:https://www.cnblogs.com/LittleTiger/p/7267735.html

海豚php表格,表格选取(1.4.3+) · DolphinPHP1.5.0完全开发手册-基于ThinkPHP5.1.41LTS的快速开发框架 · 看云...

## addSelectTable(name值, 标题, 提示, 表格列头 , 表格数据, 选择内容的url])标识符:selectTable>[info]1.4.3或更高版本支持。>[danger] **注意:该功能仅1.4.3版本以上,并且授权版用户才有,普通版没有该功能**。如果您是…

Number Sequence (KMP的应用)

个人心得&#xff1a;朴素代码绝对超时&#xff0c;所以要用到KMP算法&#xff0c;特意了解了&#xff0c;还是比较抽象&#xff0c;要多体会 Given two sequences of numbers : a11, a22, ...... , aNN, and b11, b22, ...... , bMM (1 < M < 10000, 1 < N < 1000…

java实现gdal栅格矢量化,《GDAL源码剖析与开发指南》一一1.5 GDAL源码目录

本节书摘来自异步社区出版社《GDAL源码剖析与开发指南》一书中的第1章&#xff0c;第1.5节&#xff0c;作者&#xff1a;李民录 更多章节内容可以访问云栖社区“异步社区”公众号查看。1.5 GDAL源码目录GDAL源码剖析与开发指南下载的GDAL源代码压缩包目录如图1-2所示&#xff0…

Cocos2d-X开发中国象棋《九》走棋规则

在上一节中实现了走棋&#xff0c;这篇博客将介绍中国象棋中的走棋规则 在写博客前先可能一下象棋的走棋规则&#xff1a; 1&#xff09;将 将的坐标关系&#xff1a;横坐标相等&#xff0c;纵坐标相减绝对值等于1&#xff0c;或者纵坐标相等&#xff0c;横坐标相减绝对值等于1…

php代码expl,php – 参数号无效:参数未定义Explination

我使用一个简单的测试表来尝试调试此错误.我试着写一个脚本,用户可以更新他们的用户信息,我搜索过但没有找到任何具体的帮助我.我的测试代码如下&#xff1a;PHPif(isset($_POST[submitBtn])){//Display Errors{{ PDO::ATTR_ERRMODE; }}$db->setAttribute( PDO::ATTR_ERRMOD…

js学习总结----编写简单的ajax方法库

具体代码如下: ~function(){//ajax:实现ajax请求的公共方法;当一个方法传递的参数过多&#xff0c;而且还不固定&#xff0c;我们使用对象统一传值法&#xff08;把需要传递的参数值都放在一个对象中&#xff0c;一起传递进去即可&#xff09;function ajax(options){//把需要使…

netlify支持php吗,hexo netlify 搭建简易博客

npm install hexo-cli -ghexo init blogcd blognpm installhexo server将本地文件夹推送到github修改主题git clone https://github.com/jangdelong/hexo-theme-xups.git themes/xups themes/xups修改yml配置文件重新hexo server自己的博客sleepy-poincare-e0ca11.netlify.c…

jps、jstack、jmap、jhat、jstat、hprof使用详解

https://my.oschina.net/feichexia/blog/196575#comment-list A、 jps(Java Virtual Machine Process Status Tool) jps主要用来输出JVM中运行的进程状态信息。语法格式如下&#xff1a; 如果不指定hostid就默认为当前主机或服务器。 命令行参数选项说明如下&#xff1a;…

oracle数据库日期格式的运算,Oracle时间类型date,timestamp时间差计算

Oracle的时间类型有两种date和timestamp. date精确到秒,timestamp精确到毫秒.1.计算date类型的时间差可以先把年,月,日,小时,分,秒用to_char函数拆分出来,再用to_number函数转换成数值类型.有了这些单独分开的时间就好办了.就再一个个的去减,记得考虑单位换算就行.比如都转换…

pta乙级之路

1017 A除以B (20分) #include #include #include<math.h> using namespace std; int main() { string str; cin>>str; int n,ch[1009]; cin>>n; int lenstr.length(); for (int i0;i<len;i){ ch[i]str[i]-‘0’; } for (int i0;i<len-1;i){ ch[i1]10*(…

oracle禁止修改密码,Oracle 用户密码过期后不允许修改密码的示例代码

--本人是初学者&#xff0c;不知道还有没有更好的方法create table PASSWD_CHANGED(USER_NAME VARCHAR2(20),OLD_PASSWD VARCHAR2(100),NEW_PASSWD VARCHAR2(100))CREATE OR REPLACE FUNCTION my_password_verify(usernameVARCHAR2,passwordVARCHAR2,old_passwordVARCHAR2)RETU…

查看网关

简单记两个 [rootoracle ~]# ip route show default via 192.0.2.2 dev eth0 proto static 192.0.2.0/24 dev eth0 proto kernel scope link src 192.0.2.110 metric 1 [rootoracle ~]# route -n Kernel IP routing table Destination Gateway Genmask …

double的四舍五入和上下取整

在头文件中有math。 向上取整&#xff1a;ceil(double x); 向下取整&#xff1a;floor(double x); 四舍五入&#xff1a;round(double); 特别注意&#xff1a;在C语言中上面的三个函数返回的是double型的。 但是&#xff1a; #include<iostream> #include<cmath> …

url去除掉一个参数php,php怎样去掉url中的参数_后端开发

php去掉url中的参数的要领是&#xff1a;能够经由过程trim()函数来完成。该函数能够删除字符串中的指定字符&#xff0c;并返回已修正的字符串。细致使用要领如&#xff1a;【trim($url,"?");trim($url,"#");】。相干函数引见&#xff1a;(引荐教程&#…

C++之类的静态成员变量和静态成员函数

static静态成员函数 在类中。static 除了声明静态成员变量&#xff0c;还能够声明静态成员函数。普通成员函数能够訪问全部成员变量。而静态成员函数仅仅能訪问静态成员变量。我们知道。当调用一个对象的成员函数&#xff08;非静态成员函数&#xff09;时&#xff0c;系统会把…

Oracle杀事务数据库崩溃,关于pl/sql dev窗口崩溃导致锁表

今天在用pl/sql dev写sql的时候&#xff0c;刚刚写到一个select XXX from table for update,打开了锁的按钮&#xff0c;进行了数据修改&#xff0c;这个时候没有commit&#xff0c;因为临时有事&#xff0c;所以先出去一会&#xff0c;半个小时回来后&#xff0c;发现点击pl/s…

使用VS Code开发.Net Core 2.0 MVC Web应用程序教程之一

好吧&#xff0c;现在我们假设你已经安装好了VS Code开发工具、.Net Core 2.0预览版的SDK dotnet-sdk-2.0.0&#xff08;注意自己的操作系统&#xff09;&#xff0c;并且已经为VS Code安装好了C#扩展&#xff08;在VS Code的扩展菜单中输入OmniSharp&#xff0c;安装扩展即可&…