支持自动切换的tab标签代码札记
html代码如下:
<!-- tab标签代码begin -->
<div class="tab1" id="tab1">
<div class="menu">
<ul>
<li id="one1" onclick="setTab('one',1)">新闻</li>
<li id="one2" onclick="setTab('one',2)">活动</li>
<li id="one3" onclick="setTab('one',3)">公告</li>
</ul>
</div>
<div class="menudiv">
<div id="con_one_1">新闻新闻新闻新闻新闻</div>
<div id="con_one_2" style="display:none;">活动活动活动活动活动</div>
<div id="con_one_3" style="display:none;">公告公告公告公告公告</div>
</div>
</div>
<!-- tab标签代码end -->
jquery代码如下:
<script>
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;
onload=function(){
var links = document.getElementById("tab1").getElementsByTagName('li')
links_len=links.length;
for(var i=0; i<links_len; i++){
links[i].onmouseover=function(){
clearInterval(iIntervalId);
this.onmouseout=function(){
iIntervalId = setInterval(Next,ScrollTime);;
}
}
}
document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){
clearInterval(iIntervalId);
this.onmouseout=function(){
iIntervalId = setInterval(Next,ScrollTime);;
}
}
setTab(name_0,cursel_0);
iIntervalId = setInterval(Next,ScrollTime);
}
</script>
支持自动切换的tab标签代码札记的更多相关文章
- 简洁的支持展开关闭的tab标签代码
简洁的支持展开关闭的tab标签代码,由huiyi8素材网提供. TAB标签代码下载:http://www.huiyi8.com/tab/
- 多iframe使用tab标签方式添加、删除、切换的处理实例
紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案 如果采用iframe来切换显示内容的方式来展现办公Web.那么需要解决几个问题 1.tab标签需要和显示的iframe ...
- Python3从零开始爬取今日头条的新闻【四、模拟点击切换tab标签获取内容】
Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...
- html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- [RN] React Native 下实现底部标签(支持滑动切换)
上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...
- [RN] React Native 下实现底部标签(不支持滑动切换)
底部标签是现在App的基本菜单实现 下面分别用 createBottomTabNavigator 和 createMaterialBottomTabNavigator 两种方法分别实现底部菜单 但此两 ...
- JS特效之Tab标签切换
在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...
- 很好用的Tab标签切换功能,延迟Tab切换。
一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...
- jquery Tab默认情况下自动切换
<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...
随机推荐
- css中怎么设置透明度的问题
小伙伴们是不是在找怎么样去设置页面的透明度的方法呢...别找了,我这儿就有,而且肯定够用了. 我自己会用到的就有两种,可以和大家分享一下. 1.用opcity的方法去设置透明度.代码如下: .div ...
- c++中的指针之指针在数组
使用一维指针数组输出一维数组中的数 int array[]={1,2,3,4,5,6}; int *p; p=array; for(int i=0;i<6;i++){ ...
- VIM使用(二) 浏览内核源代码
为了实现类似SourceInsight功能,通过VIM+Ctags+Cscope+Taglist+Source Explore +NERD Tree实现. 一, 安装插件 1)安装Ctags 和Csc ...
- 口水话 闭包中this的指向
前言:高程这本书真是神奇,每复习一遍,都会有新的收获.话说我看书有个习惯,要是看得似懂非懂的地方就喜欢打个“?”.这次看到高程第七章“函数表达式”关于闭包与this对象的部分,发现已经积攒了2个问号了 ...
- 形参是ofstream
今天写了一段代码报错 void GetEigenvalue(pcl::PointCloud<pcl::PointXYZ>::ConstPtr cloud, vector<int> ...
- display:block 不起作用
jquery中$("#Main").css("display","none"); $("#Day").css('disp ...
- PHPBB公布新的维护版本
9月28日,PHPBB官方网站公布了新PHPBB的最新消息.这个版本命名为:"Richard 'D¡cky' Foote",版本号为3.0.12.据官方的说明,“这个版本是一个维护 ...
- WebStorm 11激活方法
由于最新jetbrains发布了IntelliJ IDEA 15. PyCharm 5.PhpStorm10.WebStorm 11等各个版本,但是改变了注册方法.原先的注册码包括注册机都已经不能使用 ...
- AMD加载器实现笔记(三)
上一篇文章中我们为config添加了baseUrl和packages的支持,那么这篇文章中将会看到对shim与paths的支持. 要添加shim与paths,第一要务当然是了解他们的语义与用法.先来看 ...
- 《C#图解教程》读书笔记之一:C#和.NET框架
本篇已收录至<C#图解教程>读书笔记目录贴,点击访问该目录可获取更多内容. 一.在.NET之前的编程世界 C#语言是在微软公司的.NET框架上开发程序而设计的,首先作者给大家纠正了一下C# ...