前端开发选项卡设计_自动切换

web前端设计与开发|jsp前端 开发软件下载|前端开发和设计的发展前途

index=curIndex;让自动播放的i与onmouseover的i相等,要不然打架。
在for循环里要写上lis[i].id=i;这样就可以知道当前事件是几个了
this.id
html 代码

<!Doctype html>
<html lang=”‘en”>
<head>
    <meta charset=”UTF-8″>
    <title>做软件前端开发:Tab自动切换</title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 12px;
        }
        .notice {
            width: 298px;
            height: 98px;
            margin: 10px;
            border: 1px solid #eee;
            overflow: hidden;
        }
        .notice-tit {
            height: 27px;
            position: relative;
            background: #F7F7F7;
        }
        .notice-tit ul {
            position: absolute;
            width: 301px;
            left: -1px;
        }
        .notice-tit li {
            float: left;
            width: 58px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            overflow: hidden;
            background: #FFF;
            padding: 0 1px;
            background: #F7F7F7;
            border-bottom: 1px solid #eee;
        }
        .notice-tit li.select {
            background: #FFF;
            border-bottom-color: #FFF;
            border-left: 1px solid #eee;
            border-right: 1px solid #eee;
            padding: 0;
            font-weight: bolder;
        }
        .notice li a:link,
        .notice li a:visited {
            text-decoration: none;
            color: #000;
        }
        .notice li a:hover {
            color: #F90;
        }
        .notice-con .mod {
            margin: 10px 6px;
            display: none
        }
        .notice-con .mod ul li {
            float: left;
            width: 143px;
            height: 25px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id=”notice” class=”notice”>
        <div id=”notice-tit” class=”notice-tit”>
            <ul>
                <li class=”select”>
                    <a href=”#”>公告</a>
                </li>
                <li>
                    <a href=”#”>规则</a>
                </li>
                <li>
                    <a href=”#”>论坛</a>
                </li>
                <li>
                    <a href=”#”>安全</a>
                </li>
                <li>
                    <a href=”#”>公益</a>
                </li>
            </ul>
        </div>
        <div id=”notice-con” class=”notice-con”>
            <div class=”mod” style=”display:block”>
                <ul>
                    <li>
                        <a href=”#”>
                            张勇:要玩快乐足球
                        </a>
                    </li>
                    <li>
                        <a href=”#”>
                            阿里2000万驰援灾区!
                        </a>
                    </li>
                    <li>
                        <a href=”#”>
                            旅游宝让你边玩边赚钱
                        </a>
                    </li>
                    <li>
                        <a href=”#”>
                            多行跟进阿里信用贷款
                        </a>
                    </li>
                </ul>
            </div>
            <div class=”mod” style=”display:none”>
                <ul>
                    <li>
                        <span>
                            [
                            <a href=”#”>通知</a>
                            ]
                        </span>
                        <a href=”#”>
                            “滥发”即将换新
                        </a>
                    </li>
                    <li>
                        <span>
                            [
                            <a href=”#”>通知</a>
                            ]
                        </span>
                        <a href=”#”>
                            比特币严管啦!
                        </a>
                    </li>
                    <li>
                        <span>
                            [
                            <a href=”#”>通知</a>
                            ]
                        </span>
                        <a href=”#”>
                            禁发商品名录!
                        </a>
                    </li>
                    <li>
                        <span>
                            [
                            <a href=”#”>通知</a>
                            ]
                        </span>
                        <a href=”#”>
                            商品属性限制
                        </a>
                    </li>
                </ul>
            </div>
            <div class=”mod” style=”display:none”>
                <ul>
                    <li>
                        <span>
                            [
                            <a href=”#”>聚焦</a>
                            ]
                        </span>
                        <a href=”#”>
                            金牌卖家再启航
                        </a>
                    </li>
                    <li>
                        <span>
                            [
                            <a href=”#”>功能</a>
                            ]
                        </span>
                        <a href=”#”>
                            橱窗规则升级啦
                        </a>
                    </li>
                    <li>
                        <span>
                            [
                            <a href=”#”>话题</a>
                            ]
                        </span>
                        <a href=”#”>
                            又爱又恨优惠劵
                        </a>
                    </li>
                    <li>
                        <span>
                            [
                            <a href=”#”>工具</a>
                            ]
                        </span>
                        <a href=”#”>
                            购后送店铺红
                        </a>
                    </li>
                </ul>
            </div>
            <div class=”mod” style=”display:none”>
                <ul>
                    <li>
                        <a href=”#”>
                            个人重要信息要管牢!
                        </a>
                    </li>
                    <li>
                        <a href=”#”>
                            卖家防范红包欺诈提醒
                        </a>
                    </li>
                    <li>
                        <a href=”#”>
                            更换收货地址的陷阱!
                        </a>
                    </li>
                    <li>
                        <a href=”#”>
                            注意骗子的技术升级了!
                        </a>
                    </li>
                </ul>
            </div>
            <div class=”mod” style=”display:none”>
                <ul>
                    <li>
                        <a href=”#”>
                            走进无声课堂
                        </a>
                    </li>
                    <li>
                        <a href=”#”>
                            淘宝之行大众评审赢公益金
                        </a>
                    </li>
                    <li>
                        <a href=”#”>
                            爱心品牌联合征集
                        </a>
                    </li>
                    <li>
                        <a href=”#”>
                            名公益机构淘宝开店攻略
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script type=”text/javascript”>
        // 当前高亮显示的页签的索引
        var index = 0;
        var timer = null;
        // 获取所有的页签和要切换的内容
        var lis = document.getElementById(‘notice-tit’).getElementsByTagName(‘li’);
        var divs = document.getElementById(‘notice-con’).getElementsByTagName(‘div’);
        // 遍历每一个页签且给他们绑定事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].id = i;
            lis[i].onmouseover = function () {
                clearInterval(timer);
                changeOption(this.id);
            }
            lis[i].onmouseout = function () {
                timer = setInterval(autoPlay, 2000);
            }
        }
        if (timer) {
            clearInterval(timer);
            timer = null;
        }
        // 添加定时器,改变当前高亮的索引
        timer = setInterval(autoPlay, 2000);
        function autoPlay() {
            index++;
            if (index >= lis.length) {
                index = 0;
            }
            changeOption(index);
        }
        function changeOption(curIndex) {
            for (var j = 0; j < lis.length; j++) {
                lis[j].className = ”;
                divs[j].style.display = ‘none’;
            }
            // 高亮显示当前页签
            lis[curIndex].className = ‘select’;
            divs[curIndex].style.display = ‘block’;
            index = curIndex;
        }
    </script>
</body>
</html>

软件开发流程,前端后台对接|前端调试开发软件|开发web网站 前端 后端

» 本文来自:前端开发者 » 《前端开发选项卡设计_自动切换》
» 本文链接地址:https://www.rokub.com/3931.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!