码迷,mamicode.com
首页 > 其他好文 > 详细

tab

时间:2019-07-16 00:24:02      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:har   console   公益   lld   联网   上线   mic   seo   oct   

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="tab">
        <!--头部-->
        <div id="tab_header">
            <ul>
                <li class="selected">公告</li>
                <li>规则</li>
                <li>论坛</li>
                <li>安全</li>
                <li>公益</li>
            </ul>
        </div>
        <!--内容-->
        <div id="tab_content">
            <div class="dom"  style="display: block">
                <ul>
                    <li><a href="#">数据七夕:金牛爱送玫瑰</a></li>
                    <li><a href="#"> 阿里打造"互联网监管"</a></li>
                    <li><a href="#">10万家店60万新品</a></li>
                    <li><a href="#">全球最大网上时装周</a></li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li>
                        <a href="#">“全额返现”要管控啦</a>
                    </li>
                    <li>
                        <a href="#">淘宝新规发布汇总(7月)</a>
                    </li>
                    <li>
                        <a href="#">炒信规则调整意见反馈</a>
                    </li>
                    <li>
                        <a href="#">质量相关规则近期变更</a>
                    </li>
                </ul>
            </div>
            <div class="dom">
                <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="dom">
                <ul>
                    <li>
                        <a href="#">接次文件,毁了一家店</a>
                    </li>
                    <li>
                        <a href="#">账号安全神器阿里钱盾</a>
                    </li>
                    <li>
                        <a href="#">新版阿里110上线了</a>
                    </li>
                    <li>
                        <a href="#">卖家学违禁避免被处罚</a>
                    </li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li>
                        <a href="#">为了公益high起来</a>
                    </li>
                    <li>
                        <a href="#">魔豆妈妈在线申请</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
<script src="js/index.js"></script>
</body>
</html>
window.onload = function (ev) {
    // 1. 获取标签
    var allLis = $(‘tab_header‘).getElementsByTagName(‘li‘);
    var allDom = $(‘tab_content‘).getElementsByClassName(‘dom‘);
    // console.log(allLis, allDom);

    // 2. 遍历监听
   /* for (var i = 0; i < allLis.length; i++) {
        var li = allLis[i];
        (function (i) {
            li.onmouseover = function (ev1) {
                // 1. 清除同级别的选中样式类
                for (var j = 0; j < allLis.length; j++) {
                    allLis[j].className = ‘‘;
                    allDom[j].style.display = ‘none‘;
                }
                // 2. 设置当前的li标签选中样式类
                this.className = ‘selected‘;
                allDom[i].style.display = ‘block‘;
            }
        })(i)
    }*/

    for (var i = 0; i < allLis.length; i++) {
        var li = allLis[i];
        li.index = i;
        li.onmouseover = function (ev1) {
            // 1. 清除同级别的选中样式类
            for (var j = 0; j < allLis.length; j++) {
                allLis[j].className = ‘‘;
                allDom[j].style.display = ‘none‘;
            }
            // 2. 设置当前的li标签选中样式类
            this.className = ‘selected‘;
            allDom[this.index].style.display = ‘block‘;
        }
    }
};

function $(id) {
    return typeof id === ‘string‘ ? document.getElementById(id) : null;
}

 

tab

标签:har   console   公益   lld   联网   上线   mic   seo   oct   

原文地址:https://www.cnblogs.com/zhangzhengyang/p/11192291.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!