支持自动切换的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 ...
随机推荐
- spring AOP应用
转自:http://wb284551926.iteye.com/blog/1887650 最近新项目要启动,在搭建项目基础架构的时候,想要加入日志功能和执行性能监控的功能,想了很多的想法,最后还是想到 ...
- LightHttpd源码分析
源码:https://github.com/EZLippi/Tinyhttpd 要在Linux中编译,无需像代码注释所说那样: /* This program compiles for Sparc S ...
- maven 简介
本书代码下载 大家可以从我的网站下载本书的代码:http://www.juvenxu.com/mvn-in-action/,也可以通过我的网站与我取得联系,欢迎大家与我交流任何关于本书的问题和关于Ma ...
- 如何为Eclipse安装主题(Color Theme)
Eclipse开发环境默认都是白底黑字的,看到同事的Xcode中设置的黑灰色背景挺好看的,就去网上查了一下.发现Eclipse也可以设置主题. 方法1:你可以从Eclipse Marketplace中 ...
- ActionBar的使用
ActionBar的使用很普遍,可以充当工具栏使用.本文介绍如何使用ActionBar. 1.ActionBar一般包含有多个工具按钮.所以,需要新建一个xml文件来存放ActionBar中的内容.在 ...
- Linux 下比较文件内容并相同部分、不同部分
说明,是通过file2内容与file1做比较,最后列出file1与file2不同的部分! 一.准备两个文件: [root@kinggoo.com test1]# cat file1 a b c d e ...
- QQ在线客服设置
QQ在线客服设置 1.客户在添加QQ在线客服后,需要让用户在线不需要添加为好友就能在线对话,一般默认设置下会显示"您需要添加对方为好友+才能给对方发送会话消息",具体解决方法如下: ...
- sgdisk常用操作
与fdisk创建MBR分区一样,sgdisk是一个创建GPT分区的工具,如果你还不了解GPT分区,请参考The difference between booting MBR and GPT with ...
- Java Spring AOP用法
Java Spring AOP用法 Spring AOP Java web 环境搭建 Java web 项目搭建 Java Spring IOC用法 spring提供了两个核心功能,一个是IoC(控制 ...
- WPF快速入门系列(8)——MVVM快速入门
一.引言 在前面介绍了WPF一些核心的内容,其中包括WPF布局.依赖属性.路由事件.绑定.命令.资源样式和模板.然而,在WPF还衍生出了一种很好的编程框架,即WVVM,在Web端开发有MVC,在WPF ...