tab

Posted zhangzhengyang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tab相关的知识，希望对你有一定的参考价值。

技术图片

<!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的主要内容，如果未能解决你的问题，请参考以下文章

el-tab如何让点到tab页再加载

easyui怎么获取tab中所有的选项卡

怎么关闭一个jquery easyui的tab

如何在颤动中从tab1（不是重建tab2）更改tab2的状态

vba中tab空格怎么设置

jQuery easyui刷新当前tabs的方法