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标签代码札记的更多相关文章

  1. 简洁的支持展开关闭的tab标签代码

    简洁的支持展开关闭的tab标签代码,由huiyi8素材网提供. TAB标签代码下载:http://www.huiyi8.com/tab/

  2. 多iframe使用tab标签方式添加、删除、切换的处理实例

    紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案 如果采用iframe来切换显示内容的方式来展现办公Web.那么需要解决几个问题 1.tab标签需要和显示的iframe ...

  3. Python3从零开始爬取今日头条的新闻【四、模拟点击切换tab标签获取内容】

    Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...

  4. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  5. [RN] React Native 下实现底部标签(支持滑动切换)

    上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...

  6. [RN] React Native 下实现底部标签(不支持滑动切换)

    底部标签是现在App的基本菜单实现 下面分别用 createBottomTabNavigator 和 createMaterialBottomTabNavigator 两种方法分别实现底部菜单 但此两 ...

  7. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  8. 很好用的Tab标签切换功能,延迟Tab切换。

    一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...

  9. jquery Tab默认情况下自动切换

    <!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...

随机推荐

  1. winAPI 中 的 GlobalLock GlobalUnlock 的作用

    在项目中遇到GlobalLock  GlobalUnlock 这两个操作内存的函数. 百度百科解释为:锁定内存中指定的内存块,并返回一个地址值,令其指向内存块的起始处.除非用 GlobalUnlock ...

  2. 8.4.3 Glide

    1). 导入库 dependencies { compile 'com.github.bumptech.glide:glide:3.5.2' compile 'com.android.support: ...

  3. c++的转换

    1.静态转换 static_cast 用于明确定义的变换 ,包括 编译器允许的非强制转换和不太安全但定义清楚的变换.ps:(非强制变换,窄化变换,隐式转换,类层次静态定位,void*强制转换) 2.常 ...

  4. C++模板&泛型编程

    ---恢复内容开始--- 一.泛型编程 定义:编写与类型无关的逻辑代码,是代码复用的一种手段.模板是泛型编程的基础 模板分为:函数模板和类模板 函数模板:代表了一个函数家族,该函数与类型无关,在使用时 ...

  5. 关于placeholder中 文字添加换行 用转义字符&#13;&#10;代替<br>

    今天遇到一个问题 UI给的效果图中 文本域的提示文字 是两行显示, 于是就想到placeholder中能否解析html标签, 尝试后发现并无卵用, 经过调查后发现 可以用转义字符代替<br> ...

  6. PyCharm 3.0 发布,提供免费开源版本

    PyCharm 发布最新的 3.0 版本,该版本新特性详见: http://www.jetbrains.com/pycharm/whatsnew/index.html 该版本最主要的是提供了免费开源的 ...

  7. 如何利用Github+Appveyor+Nuget打造自己的.net core开源库

    以下教程基于你有一个托管在Github上的.net core项目,如果没有的可以自己fork一个或者自己创建了默认的项目即可. 我们打开需要生成nuget包的项目中的project.json文件,有关 ...

  8. javascript 设计模式-----工厂模式

    所谓的工厂模式,顾名思义就是成批量地生产模式.它的核心作用也是和现实中的工厂一样利用重复的代码最大化地产生效益.在javascript中,它常常用来生产许许多多相同的实例对象,在代码上做到最大的利用. ...

  9. AMD加载器实现笔记(一)

    之前研究过AMD,也写过一篇关于AMD的文章<以代码爱好者角度来看AMD与CMD>.代码我是有看过的,基本的原理也都明白,但实际动手去实现却是没有的.因为今年计划的dojo教程<静静 ...

  10. Java提高篇(二七)-----TreeMap

    TreeMap的实现是红黑树算法的实现,所以要了解TreeMap就必须对红黑树有一定的了解,其实这篇博文的名字叫做:根据红黑树的算法来分析TreeMap的实现,但是为了与Java提高篇系列博文保持一致 ...