php tab标签,JavaScript代码分享：tab标签的切换
本文实例讲述了js实现点击切换TAB标签。分享给大家供大家参考。具体如下：
这里演示的选项卡效果代码，无jq,纯JS来实现，灰色风格，没有怎么美化，或许看上去比较普通，不过兼容性和操作起来挺舒服的，风格适用于大部分的网站，或许你会用得上。
先来看看运行效果截图：
具体代码如下：/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
点击切换选项卡代码*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.tab1{width:401px;border-top:#cccccc solid 1px;border-bottom:#cccccc solid 1px;margin:50px auto 0 auto;}
.menu{height:28px;border-right:#cccccc solid 1px;}
.menu li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#cccccc solid 1px;color:#666;font-size:14px;overflow:hidden;background:#E0E2EB;}
.menu li.off{background:#FFFFFF;color:#336699;font-weight:bold;}
.menudiv{height:200px;border-left:#cccccc solid 1px;border-right:#cccccc solid 1px;border-top:0;background:#fefefe}
.menudiv div{padding:15px;line-height:28px;}
function setTab(name,cursel){
cursel_0=cursel;
for(var i=1; i<=links_len; i++){
var menu = document.getElementById(name+i);
var menudiv = document.getElementById("con_"+name+"_"+i);
if(i==cursel){
menu.className="off";
menudiv.style.display="block";
}
else{
menu.className="";
menudiv.style.display="none";
}
}
}
function Next(){
cursel_0++;
if (cursel_0>links_len)cursel_0=1
setTab(name_0,cursel_0);
}
var name_0="one";
var cursel_0=1;
var ScrollTime=3000;//循环周期(毫秒)
var links_len,iIntervalId;
οnlοad=function(){
var links = document.getElementById("tab1").getElementsByTagName("li")
links_len=links.length;
for(var i=0; i
links[i].οnmοuseοver=function(){
clearInterval(iIntervalId);
this.οnmοuseοut=function(){
iIntervalId = setInterval(Next,ScrollTime);;
}
}
}
document.getElementById("con_"+name_0+"_"+links_len).parentNode.οnmοuseοver=function(){
clearInterval(iIntervalId);
this.οnmοuseοut=function(){
iIntervalId = setInterval(Next,ScrollTime);;
}
}
setTab(name_0,cursel_0);
iIntervalId = setInterval(Next,ScrollTime);
}
希望本文所述对大家的javascript程序设计有所帮助。
相关文章：
二进制,十进制,十六进制
生活中其实很多地方的计数方法都多少有点不同进制的影子。 比如我们最常用的10进制，其实起源于人有10个指头。如果我们的祖先始终没有摆脱手脚不分的境况，我想我们现在一定是在使用20进制。 至于二进制……没有袜子称为0只袜子，有一只袜子称为…
D3.js系列——初步使用、选择元素与绑定数据
D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。 D3 提供了各种简单易用的…
秦州：西瓜书 + 南瓜书 吃瓜系列 12. 聚类
Datawhale南瓜书是经典机器学习教材《机器学习》（西瓜书）的公式推导解析指南，旨在让在学习西瓜书的过程中，再也没有难推的公式，学好机器学习。 航路开辟者：谢文睿、秦州开源内容：https://githu…
php 5/0,PHP 5.5.0 released.该怎么解决
当前位置:我的异常网 PHP PHP 5.5.0 released.该怎么解决PHP 5.5.0 released.该怎么解决www.myexceptions.net 网友分享于：2013-08-02 浏览：12次PHP 5.5.0 released.The PHP development team is proud to announce the immediate availability of PH…
Windows下SVN权限配置过程详解
本节讲解一下Windows下SVN权限配置说明，针对的是一个目录下多库的情况，下面是具体的介绍，希望通过本文的学习，你能够对SVN权限配置问题有更加深刻的认识。 1、本文档适用于对Subvesion的自带服务svnserve进行权限配置，…
胡小明：大数据应用方向思考
一、警惕大数据过热 1.1 过热产生盲目性 国内大数据的宣传早已过热，很多区县级政府也在考虑成立大数据局，政府对大数据热几乎没有抵抗力，企业没有紧跟就对了，在大数据高潮中反省政府的大数据行为、冷静一下头脑是有益的࿰…
Datawhale组队学习周报（第040周）
本周报总结了从 11月15日至11月21日，Datawhale组队学习的运行情况，我们一直秉承“与学习者一起成长的理念”，希望这个活动能够让更多的学习者受益。 第 31 期组队学习已经与大家见面了，这次组队学习一共 11 门开源课程࿰…
matlab 无序数对,MATLAB中sort函数对矩阵数进行排序
(1)Bsort(A) 对一维或二维数组进行升序排序,并返回排序后的数组,当A为二维时,对数组每一列进行排序.eg: A[1,5,3],则sort(A)[1,3,5]A[1,5,3;2,4,1],则sort(A)[1,4,1;2,5,3](2)Bsort(A,dim),对数组按指定方向进行升序排序,dim 1,表示对每一列进行排序,,dim2表示对每一行进行排序…
云智易获上海CIO联盟“年度物联网云平台技术创新奖”
6月23日，云智易作为国内领先物联网云平台，受邀出席“跨界融合 聚势谋远”上海CIO联盟峰会。本次大会汇聚了全球各地各行业300位精英翘楚，共话未来发展趋势。 在本次大会中，云智易物联云平台凭借强大的技术实力、成熟的平台架构、…
d3d导致cairo不正常
最近要把cairo集成到项目中,却发现cairo不能工作了 折腾了两天才找到了原因:cairo的一个trick导致浮点数计算错误: http://blog.163.com/lvan100yeah/blog/static/6811721420131191434556/ 给d3dcreate加上D3DCREATE_FPU_PRESERVE之后一切正常 如果我直接调cairo的代码就能早点…
青少年编程竞赛交流群周报（第038周）
2021年11月21日（周日）晚20:00我们在青少年编程竞赛交流群开展了第三十八期直播活动。 一、直播内容 我们直播活动的主要内容如下： 讲解了上次测试中小朋友们做错的题目 Scratch青少年编程能力等级测试模拟题（四级）。…
php的遍历方法,PHP数组遍历方法总结
在PHP中数组分为两类： 数字索引数组和关联数组。其中数字索引数组和C语言中的数组一样，下标是为0，1，2…而关联数组下标可能是任意类型，与其它语言中的hash，map等结构相似。下面介绍PHP中遍历关联数组的三种…
二、Silverlight中使用MVVM(二)——提高
在第一篇文章中的示例中，我们已经简单的了解了应用MVVM模式的流程，我的本意是你已经了解了一点MVVM的概念，然后又没有一个较好的例子学习，可以跟着我一起学习MVVM模式，所以这个部分，都是没有理论知识的&…
中国电子学会青少年编程能力等级测试图形化四级编程题：太空大战
「青少年编程竞赛交流群」已成立（适合6至18周岁的青少年），公众号后台回复【Scratch】或【Python】，即可进入。如果加入了之前的社群不需要重复加入。 我们将有关编程题目的教学视频已经发布到抖音号21252972100，小马老…
Pycharm开发环境设置与熟悉。
练习基本输入输出： print(你好,{}..format(name)) print(sys.argv) 库的使用方法： import ... from ... import ... 条件语句： if (abs(pos()))<1: break 循环语句： for i in range(5): while True: 函数定义： def …
oracle 默认表空间 10g,Oracle10g 表空间管理
1.表空间分类：(1)临时表空间：存放临时数据(2)数据表空间：又称为用户表空间，用来存放永久数据(不删除永久存在)(3)日志表空间：用来存放日志信息一般情况下，用户使用时只需要创建数据表空间即可，根…
POJ1022 Packing Unit 4D Cubes
题目来源：http://poj.org/problem?id1022 题目大意： 有一些4维的单位体积的立方体盒子，每个立方体有8个面。要用一个大的4为盒子将它们包起来，求最小的大盒子体积。 输入：第一行为测试用例数。每个用例的第一行为单位…
中国电子学会青少年编程能力等级测试图形化三级编程题：海底寻宝
「青少年编程竞赛交流群」已成立（适合6至18周岁的青少年），公众号后台回复【Scratch】或【Python】，即可进入。如果加入了之前的社群不需要重复加入。 我们将有关编程题目的教学视频已经发布到抖音号21252972100，小马老…
用Ajax请求服务器的图片，并显示在浏览器中(转)
前言 一直在数据库里面存的都是图片在服务器的地址，然后再到浏览器中显示，但是发现两个问题 第一：为了安全起见，js是无法读取本地的图片的，不然你写一个js，岂不是可以获取任何人电脑里面的文件了。 第二&am…
pb设置Oracle事务的隔离级别,Oracle的事务隔离级别
ANSI/ISO SQL规定了四种事务隔离级别，分别是：read uncommitted,read committed,repeatable read,serializableORACE提供了SQ92标准中的read committed和seriaizabe，同时提供了非SQ92标准的read-ony。read committed：这是ORACE缺省…
inux php pdo mysql 扩展
今天在本机部署了一个pdo项目，发现一些问题，真没想到pdo mysql，不容易装啊，哈哈，我说的不容易，是因为php5.3以前版本，yum源里面根本没有。部署后就报，Undefined class constant MYSQ…
Maven项目Spring Boot启动
1. pom.xml中增加配置 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.0.RELEASE</version></parent><dependencies><dependency><gr…
中国电子学会青少年编程能力等级测试图形化四级模拟题
「青少年编程竞赛交流群」已成立（适合6至18周岁的青少年），公众号后台回复【Scratch】或【Python】，即可进入。如果加入了之前的社群不需要重复加入。 我们将有关编程题目的教学视频已经发布到抖音号21252972100，小马老…
Oracle设置date数据比较,ORACLE DATE和TIMESTAMP数据类型的比较
DATE数据类型这个数据类型我们实在是太熟悉了，当我们需要表示日期和时间的话都会想到date类型。它可以存储月，年，日，世纪，时，分和秒。它典型地用来表示什 么时候事情已经发生或将要发生。DATE数据类型的问题…
POJ 1552 Doubles (C++ STL set使用）
题目： 题意：题意：给出几个正数（2~15个），然后就是求有这些数字的2倍有没有和原先的正数相同的，求出有几个，没有就是0. 分析：水题。用数组解决，开一个数组存正数…
凌亮：动手学数据分析笔记
凌亮是华北电力大学数理系大二的学生，LSGO软件技术团队（Dreamtech算法组）成员，参加了多期Datawhale的组队学习。 这篇图文是他在线下组队学习时，为大家分享自己学习“动手学数据分析”的笔记。 希望参与我们线下组队…
【H.264/AVC视频编解码技术详解】十九：熵编码算法(5)——H.264的CABAC（上）：语法元素的二值化方法...
《H.264/AVC视频编解码技术详解》视频教程已经在“CSDN学院”上线，视频中详述了H.264的背景、标准协议和实现，并通过一个实战工程的形式对H.264的标准进行解析和实现，欢迎观看！ “纸上得来终觉浅，绝知此事要躬行”&…
oracle anbob,Tag Archives: oracle安装 | ANBOB
2016/08/02363 viewsUsing ‘opatch lsinventory’ show patched is real? (看到的补丁信息真的靠谱么？)已关闭评论去年在排查SCN 天花板问题修改相关的几个参数时，发现了这个问题，尤其如果是从别人手中接手的数据库，通常从opatc…
Python之装饰器
Python之装饰器 在不修改函数调用方式的前提下，也不能修改函数内部源代码！！！！ 例如： 在每个季度公司发绩效，统计每个人的代码执行效率。咱们总不能是每个函数里加time模块吧。 import timedef t…
Datawhale组队学习周报（第041周）
本周报总结了从 11月22日至11月28日，Datawhale组队学习的运行情况，我们一直秉承“与学习者一起成长的理念”，希望这个活动能够让更多的学习者受益。 第 31 期组队学习已经与大家见面了，这次组队学习一共 11 门开源课程࿰…