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. ListView之头部浮动效果

    ListView 中有时需要在顶部固定一个浮动栏,当向上滑动 ListView 时,浮动栏固定在顶部,当向下滑动 ListView 到其 HeaderView 可见时,浮动栏成为ListView的一部 ...

  2. [Leetcode][JAVA] Minimum Depth of Binary Tree && Balanced Binary Tree && Maximum Depth of Binary Tree

    Minimum Depth of Binary Tree Given a binary tree, find its minimum depth. The minimum depth is the n ...

  3. 简单BigDecimal运算精度

    项目中遇到了数值运算,如网上所写的,一般有这几个方法: /** * 提供精确的加法运算. * @param v1 被加数 * @param v2 加数 * @return 两个参数的和 */ publ ...

  4. 【转】COM技术内幕(笔记)

    COM技术内幕(笔记) COM--到底是什么?--COM标准的要点介绍,它被设计用来解决什么问题?基本元素的定义--COM术语以及这些术语的含义.使用和处理COM对象--如何创建.使用和销毁COM对象 ...

  5. 初探Lambda表达式

    简单例子 Expression<Func<; 了解Net方法,没有比IL来得更加容易.反编译IL代码如下(截取部分显示) [] <<int32, bool>> ex ...

  6. Linq To Xml基础

    <?xml version="1.0" encoding="utf-8" ?> <Books> <Category Order=& ...

  7. RHEL6.5 删除桌面启动器(计算机/Home/回收站)

    首先,安装gconf-editor以获得gconftool-2命令 终端命令: gconftool-2 --set /apps/nautilus/desktop/computer_icon_visib ...

  8. 测试CAS

    参考博客 http://www.cnblogs.com/adolfmc/archive/2012/07/16/2593291.html 准备工作: 1.cas服务器:http://cas:8443/l ...

  9. sum() 函数

    sum()的参数是一个list 例如: sum([1,2,3])

  10. PAT/查找元素习题集

    B1004. 成绩排名 (20) Description: 读入n名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. Input: 每个测试输入包含1个测试用例,格式为: 第1行: ...