本文共 4351 字，大约阅读时间需要 14 分钟。

知识点

1. 排他思想：有我无他。上面五个li和下面五个li，只有一个可以有class='selected’和display:block
2. 闭包 && 为标签增加我们需要的属性
3. 设置class的时候，必须通过className，不能直接通过class

运行效果

点击不同标签显示不同内容

代码

html

    
           
   
   
    
        
    
        
     
            
      
公告
            
      
规则
            
      
论坛
            
      
安全
            
      
公益
        
     
    
    
    
        
    
        
     
            
      
                
       
数据七夕·金牛爱送玫瑰花
                
       
阿里打造"互联网监管"
                
       
10万家店60万新品
                
       
全球最大网上时装周
            
      
        
     
        
     
            
      
                
       
123
                
       
234
                
       
345
                
       
456
            
      
        
     
        
     
            
      
                
       
qwe
                
       
asd
                
       
zxc
                
       
dfz
            
      
        
     
        
     
            
      
                
       
1az
                
       
2ws
                
       
3df
                
       
4fg
            
      
        
     
        
     
            
      
                
       
!@#
                
       
%^&
                
       
*%^
                
       
%$#
            
      
        
     
    
    
   

css

*{
       margin: 0;    padding: 0;    list-style: none;}html{
       font-size: 10px;}a{
       text-decoration: none;    color: #000000;}#tab{
       width: 50rem;    height: 12rem;    border: 0.1rem solid #cccccc;    margin: 10rem auto;}#tab>#tab_header{
       height: 3rem;    width: 100%;    /*background-color: red;*/}#tab>#tab_header>ul{
       display: flex;    justify-content: space-around;    height: 100%;    text-align: center;}#tab>#tab_header>ul>li{
       background-color: #cccccc;    height: 100%;    width: 100%;    font-size: 1.5rem;    line-height: 3rem;    cursor: pointer;}#tab>#tab_header>ul>li:hover{
       color:#ff6700;}#tab>#tab_header>ul>.selected{
       background-color: white !important;    border-bottom: none !important;}#tab>#tab_content{
       height: 9rem;    width: 100%;    position: relative;}#tab>#tab_content>div{
       height: 100%;    width: 100%;    position: absolute;    top: 0;    left: 0;    display: none;}#tab>#tab_content>div>ul{
       height: 100%;    display: flex;    flex-wrap: wrap;    text-align: center;}#tab>#tab_content>div>ul>li{
       height: 4.5rem;    width:50%;    line-height: 4.5rem;    font-size: 1.7rem;}#tab>#tab_content>div>ul>li>a:hover{
       color:#ff6700;}

JavaScript

window.onload = function (ev) {
       // 1. 获取标签    var allLis = $('tab_header').getElementsByTagName('li');    var allDom = $('tab_content').getElementsByClassName('dom');    // 2. 遍历监听    for (var i = 0; i < allLis.length; i++) {
           var li = allLis[i];        (function (index) {
               li.addEventListener('mouseover',function (evt) {
                   // 2.1 清楚同级别选中样式雷                for (var j = 0; j < allLis.length; j++) {
                       allLis[j].className = '';                    allDom[j].style.display ='none';                }                // 2.2 设置当前li标签选中样式类                this.className = 'selected';    //必须通过className，不能直接通过class                allDom[index].style.display = 'block';            })        })(i);    }    /**     * 根据id返回获取节点元素     * @param {string}id     * @returns {any}     */    function $(id) {
           return typeof id === 'string' ? document.getElementById(id) : null;    }};

② 为li增加新的属性记录

window.onload = function (ev) {
       // 1. 获取标签    var allLis = $('tab_header').getElementsByTagName('li');    var allDom = $('tab_content').getElementsByClassName('dom');    // 2. 遍历监听    for (var i = 0; i < allLis.length; i++) {
           var li = allLis[i];        li.index = i;        li.addEventListener('mouseover',function (evt) {
               // 2.1 清楚同级别选中样式雷            for (var j = 0; j < allLis.length; j++) {
                   allLis[j].className = '';                allDom[j].style.display ='none';            }            // 2.2 设置当前li标签选中样式类            this.className = 'selected';    //必须通过className，不能直接通过class            allDom[this.index].style.display = 'block';        })    }    /**     * 根据id返回获取节点元素     * @param {string}id     * @returns {any}     */    function $(id) {
           return typeof id === 'string' ? document.getElementById(id) : null;    }};

转载地址：https://kaisarh.blog.csdn.net/article/details/103649516 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！