javascript实现tabs选项卡切换效果(扩展版)
前段时间写了个tabs 选项卡切换效果，今天抽空在原有的基础上进行了扩展，加入了自动轮播，这样就变成了类似图片轮播的效果了。
html 代码：
代码如下:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>js-tabs</title>
<link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/>
<style type="text/css">
a{color:#a0b3d6;}
.tabs{border:1px solid #a0b3d6;margin:100px;width:300px;}
.tabs-nav a{background:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6;float:left;}
.tabs-nav .select1,.tabs-nav .select2,.tabs-nav .select3,.tabs-nav .select4{background:white;border-bottom:1px solid white;_position:relative;}
.tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;}
</style>
</head>
<body>
<div class="tabs" id="tabs">
<h2 class="tabs-nav clearfix">
<a href="javascript:;">首页</a>
<a href="javascript:;">技术</a>
<a href="javascript:;">生活</a>
<a href="javascript:;">作品</a>
</h2>
<p class="tabs-content">首页首页首页首页首页首页首页首页首页首页</p>
<p class="tabs-content">技术技术技术技术技术技术技术技术技术技术</p>
<p class="tabs-content">生活生活生活生活生活生活生活生活生活生活</p>
<p class="tabs-content">作品作品作品作品作品作品作品作品作品作品</p>
</div>
<br/><br/>
<div class="tabs" id="tabs2">
<h2 class="tabs-nav clearfix">
<a href="javascript:;">11111</a>
<a href="javascript:;">22222</a>
<a href="javascript:;">33333</a>
</h2>
<p class="tabs-content">11111111111111111111111111111111111</p>
<p class="tabs-content ">222222222222222222222222222222222222</p>
<p class="tabs-content ">333333333333333333333333333333333333333</p>
</div>
</body>
</html>
<script type="text/javascript" src="tabs.js"></script>
<script type="text/javascript">
window.onload = function(){
tabs('tabs','click',true,1000);
tabs('tabs2','mouseover');
}
</script>
function tabs(id,trigger,autoplay,time){
var tabsWrap = document.getElementById(id);
var tabsBtn = tabsWrap.getElementsByTagName('h2')[0].getElementsByTagName('a');
var tabsContent = getClass('tabs-content',tabsWrap);
var timer = null;
var current = 0;
show(0);
for(var i = 0,len = tabsBtn.length; i < len; i++){
tabsBtn[i].index = i;
if(trigger == 'click'){
tabsBtn[i].onclick = function(){
show(this.index);
}
}else if(trigger == 'mouseover'){
tabsBtn[i].onmouseover = function(){
show(this.index);
}
}
}
if(autoplay){
autoPlay();
tabsWrap.onmouseover = function(){
clearInterval(timer);
}
tabsWrap.onmouseout = function(){
autoPlay();
}
}
function autoPlay(){
timer = setInterval(function(){
show(current);
current++;
if(current >= tabsBtn.length){
current = 0;
}
},time);
}
function show(n){
current = n;
for(var i = 0,len = tabsBtn.length; i < len; i++){
tabsBtn[i].className = '';
tabsContent[i].style.display = 'none';
}
tabsBtn[current].className = 'select' + (current + 1);
tabsContent[current].style.display = 'block';
}
function getClass(classname,obj){
var results = [];
var elems = obj.getElementsByTagName('*');
for(var i = 0; i < elems.length; i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}
PS：这是本人闲着无聊，通过自己所学的 javascript 知识，随意写的一些效果。
相关推荐
-
js实现选项卡内容切换以及折叠和展开效果【推荐】
1.选项卡效果预览 2.源码与简要说明 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>切换选项卡功能实现</title> <link rel="stylesheet" href="css/switchTab.css" /> </head> <body> <div
-
原生js实现tab选项卡切换
本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分 <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> <li><a hre
-
javascript实现tabs选项卡切换效果(自写原生js)
现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下: html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</
-
js实现简单选项卡与自动切换效果的方法
本文实例讲述了js实现简单选项卡与自动切换效果的方法.分享给大家供大家参考.具体分析如下: 这里再上篇<js实现简单的可切换选项卡效果>基础上,进一步实现可以自动切换的切换效果,用这种效果就可以做简单的焦点图了. 说明: 设置一个标识数字置为0,写一个每过几秒标识+1,执行切换效果的函数,然后执行. 当标识超过当前选项卡长度让标识置为0. 在鼠标移到选项卡的时候关闭定时器,鼠标移走的时候打开定时器. <!DOCTYPE html> <html> <head>
-
js实现简单的可切换选项卡效果
本文实例讲述了js实现简单的可切换选项卡效果的方法.分享给大家供大家参考.具体如下: 如图,最简单的纯粹的选项卡 第一步,当然是先写html代码和css样式 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>无标题文档</title> <style> body,ul,li{margin:0; padding:0; font:12
-
跨浏览器通用、可重用的选项卡tab切换js代码
由于近来学了点js,于是我装逼道...不太难吧...就切一下display属性?同学无视我..说要搞个通用的...什么还要跟ajax交互..???我愣是没有听懂...到底要搞什么...权当作练手,我自己胡弄了一个. 需求:同学口中的通用我不知道神马意思...那我就按自己的理解吧.. ①跨浏览器,IE6+,FF,Chrome,Safari,Opera ②同一个页面可以用同一个js设置不同的选项卡. 说太多没啥米用,来看代码吧. 一.html部分(其实这还没啥好看的,设置了三个,前两个是一样的,通过
-
4种JavaScript实现简单tab选项卡切换的方法
本文实例讲解了4种JavaScript实现简单tab选项卡切换的方法,分享给大家供大家参考,具体内容如下 效果图: 方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换</title> <style type="text/cs
-
Vue.js组件tabs实现选项卡切换效果
今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di
-
JS实现自动定时切换的简洁网页选项卡效果
本文实例讲述了JS实现自动定时切换的简洁网页选项卡效果.分享给大家供大家参考.具体如下: 这是一款简洁人网页选项卡,与其它TAB不同的是,本选项卡是自动切换的,在变量里设定选项卡的内容.切换时间等,它就开始工作了,如果可以响应鼠标的动作就更完美了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-auto-ds-web-menu-demo/ 具体代码如下: <html> <head> <title>自动切换的选项卡
-
javascript实现tabs选项卡切换效果(扩展版)
前段时间写了个tabs 选项卡切换效果,今天抽空在原有的基础上进行了扩展,加入了自动轮播,这样就变成了类似图片轮播的效果了. html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</title> <link rel="styleshe
-
基于JavaScript实现Tab选项卡切换效果
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .box { width: 500px; height: 400px
-
基于javascript实现最简单的选项卡切换效果
本文实例为大家分享了js选项卡切换效果的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>朱朱制作</title> <script src="js/jquery.js" type="text/javascript"></script> &
-
很棒的js选项卡切换效果
本文实例为大家分享了js实现简单的选项卡切换效果的具体代码,供大家参考,具体内容如下 js选项卡切换代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Auth
-
jQuery实现Tab选项卡切换效果简单演示
本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示,完全是自己的思考实现过程,分享给大家供大家参考.具体如下: 起初我Html代码架子是这样的: <div class="tabs"> <ul> <li class="acss" data-box="#panel-1">标签1</li> <li class="bcss" data-box="#panel-
-
vue实现选项卡及选项卡切换效果
这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目中需要实现的一些效果拆分成模块.你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回过头来看我的实现代码.记住,通读Vue文档真的很重要,很重要! 这里的Vue以单文件的形式引入,另外代码在实现上会一步步的进行优化,客官不要着急! 下面是一个样式稍微丑陋,但功能OK的选项卡. <!DOCTYPE html> <html> <head> <meta c
-
很实用的js选项卡切换效果
本文实例为大家分享了js实现简单的选项卡切换效果的具体代码,供大家参考,具体内容如下 js选项卡切换代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="gb2312"> <title>实践题 - 选项卡</title> <style type="text/css"> *{ margin:0px; p
-
jQuery实现选项卡切换效果简单演示
本文实例讲述了jQuery实现选项卡切换效果简单演示代码.分享给大家供大家参考.具体如下: 运行效果图如下 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡</title> <link type="text/css" rel="stylesheet" href="c
-
基于jQuery实现仿百度首页选项卡切换效果
以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧. 先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title&