zoukankan      html  css  js  c++  java
  • 支持自动切换的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>
  • 相关阅读:
    IE8兼容
    游标
    WARN No appenders could be found for logger (org.springframework.orm.hibernate3.support.OpenSessionInViewFilter)
    sql server 备份数据
    JS页面打印
    jQuery Mobile 入门教程
    jquerymobile入门(文件引用+多页面)
    定位和可见性
    二月份总结
    mailto用法
  • 原文地址:https://www.cnblogs.com/wenzheshen/p/5802426.html
Copyright © 2011-2022 走看看