用js写简单选项卡 加 自动切换效果

最新推荐文章于 2022-05-21 17:44:41 发布
最新推荐文章于 2022-05-21 17:44:41 发布
阅读量1.6k 收藏
点赞数
分类专栏： js 文章标签： js tab切换 
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){

    tab("tab_t","li","tab_c","div","onmouseover")
    function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
        var tab_t = document.getElementById(tab_t);
        var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
        var tab_c = document.getElementById(tab_c);
        var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
        var len = tab_t_li.length;
        var i=0;
        var timer = null;
        var num=0;
            for(i=0; i<len; i++){
                tab_t_li[i].index = i;
                tab_t_li[i][evt] = function(){
                  clearInterval(timer);
                    num = this.index;
                    tab_change()
                }
                tab_t_li[i].onmouseout = function(){
                    autoplay();
                }
            }
        
        function tab_change(){
            for(i=0; i<len; i++){
                tab_t_li[i].className = '';
                tab_c_li[i].className = 'hide';
            }
            tab_t_li[num].className = 'act';
            tab_c_li[num].className = '';
        }
        
        function autoplay(){
          timer = setInterval(function(){
              num++;
                if(num>=len) num=0;
              tab_change();
            },1000);
        }
        autoplay();
    }
    
}
</script>
</head>

<body>

<div class="wrap">
  <ul id="tab_t">
    <li class="act">选择1</li>
    <li>选择2</li>
    <li>选择3</li>
    <li>选择4</li>
  </ul>
  <div id="tab_c">
    <div>内容1</div>
    <div class="hide">内容2</div>
    <div class="hide">内容3</div>
    <div class="hide">内容4</div>
  </div>
</div>  
  
</body>
</html>
江南风雨2013
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自动切换模式Tab选项卡 - Rotating jQuery tabs
07-20
自动切换模式Tab选项卡 - Rotating jQuery tabs
选项卡自动切换效果
05-20
选项卡自动切换效果
选项卡，自动切换
weixin_33796205的博客
07-27 166
1.页面展示 2.需求是能够自动切换 3.html布局：标题：用一个div包裹，下拉的内容也是用一个div包裹 4.js代码： var $list=$(".Filter_title .Filter_title_ul li"); //点击对应的列表 var $Filter_map_div=$(".Filter_map")//下拉的内容部分 $list.click(function()...
程序控制选项卡自动切换
weixin_30888707的博客
02-23 408
程序控制选项卡自动切换 有些时候，我们做界面，需要好多个界面切换。 如果是同一个VI里界面切换，一般都是选项卡了。切换不同选项卡就切换界面了。 一般来说，选项卡都是输入控件，手动选择选项卡来切换。 但是怎么让我们选择某个菜单，或者某个按钮时候，自动切换到对应界面呢？ 请看下图，我做了非常详细的贴图。 如果你的程序，不需要手动自己点击切换，...
JavaScript - 自动轮换选项卡
小白的向往
01-04 315
效果图：     Document *{margin:0;padding:0;} li{list-style:none;} #content{ width:550px; height:300px; border:1px solid #000; margin:20px auto; position:relative; border-ra
可自动切换选项卡
YZi_Angel的专栏
07-30 821
当鼠标移动的时候，停止自动切换，当鼠标移除的时候继续自动切换 代码如下： 无标题文档 *{margin:0;padding:0} .notice{ height:98px; width:298px; border:1px solid #eee; overflow:hidden; } .notice-tit{ height:27px; position:relati
选项卡自动切换（有定时器）
Tkings233的博客
09-01 392
html： <template> <div class="main"> <div class="all"> <dl class="all-one"> //选项卡标题 <div class="top"> <dt class="title one">nav1</dt> <dt class=".
选项卡自动切换
Celeste of Jesus的博客
09-29 233
//自动切换 var i=0; var autotab =setInterval(function(){ $('.tabBox .tabTit span').eq(i).addClass('on').siblings().removeClass('on'); $('.tabCon .con').eq(i).show().siblings().hide(); i++; if(i>3/*...
js+jQuery自动切换选项卡
superpan的博客
09-05 294
html界面布局结构： jQuery方式实现自动跳转至指定tab： $('.category').find("*").removeClass('active'); $('.sign').addClass('active'); $('.cont.active').removeClass('active'); $('.cont-sign').addCla
jquery实现tab标签选项卡自动切换效果
sunny_sailor的专栏
03-02 2300
XML/HTML代码 >  html xmlns="http://www.w3.org/1999/xhtml">  head>  meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  title>jQuery实现的tab标签自动切换效果title>  style type="text/css">  * {m
jquery自动切换tabs选项卡
weixin_33895604的博客
06-24 83
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%String path = request.getContextPath();%><!DOCTYPE html PUBLIC "-//W3C//...
jQuery自动切换/点击切换选项卡效果的小例子
01-19
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><html><head><meta http-equiv=”Content-Type” content=”text/html; charset=GBK”><title>404 Not Found</title></head><body> <h1>找不到指定的页面</h1> <span id=”totalSecond”>3</span>秒后自动返回</body><script lang
轻松实现jquery选项卡切换效果
11-27
很早之想就学习jquery的插件写法，一直拖到现在，今天趁着没什么工作忙，搜索些资料学习下，写了个比较简单的选项卡效果。 刚开始有看到一个很通俗易通的例子：alert对话框。 jquery.alertMsg.js /** * [description] * @param {[type]} $ [description] * @return {[type]} [description] */ (function($){ $.fn.alertMsg = function(options) { var defaults = { mouseEvent: 'clcik', msg:
jquery自动切换tabs选项卡的具体实现
12-07
本节内容：jquery实现自动切换选项卡。 代码： 代码如下:<%@ page language=”java” contentType=”text/html; charset=utf-8″ pageEncoding=”utf-8″%><%String path = request.getContextPath(); %><!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><html><head><meta http-equiv=”Content
js实现选项卡切换
sweetllh的博客
04-23 1186
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>选项卡切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } bod
Javascript特效之选项卡定时自动切换
a271720559的博客
06-22 1952
Javascript特效之选项卡卡定时自动切换我们经常看到一些广告是tab页形式的，而且会自动切换，今天我们来看看是怎么实现的。效果图：每过一秒会自动切换一个tab页。实现思路：写一个定时器每一秒执行一次，并判断当前tab页的下标来显示对应的tab页。对其他tab则设置display：none。js代码：function sh(){ s=(s&gt;=5)?1:s+1 for (var i=1...
jQuery实现选项卡切换效果
qazxsw635241的博客
07-30 1227
<style type="text/css"> *{margin:0px;padding:0px;} .tabbox{margin:10px;} .tabbox ul{list-style:none;display:table;} .tabbox ul li{float:left;width:100px;line-height:30px;padding-left:8px;border...
前端html+css+js开发：简单选项卡切换-自动（附源码）
qq_57210034的博客
05-21 1788
效果图： css代码： * { margin: 0; padding: 0; font-size: 12px; font-family: "微软雅黑"; color: #3c3c3c; text-decoration: none; list-style-type:none; } #tab_list { width: 275px; height: 190px; margin: 30px auto;.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值