选项卡TAB实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46685054/article/details/128861361
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>BOSCH_{{ companyNum }}</title>
        <style>
            .notice-title ul{
                padding: 0;
            }
            .notice-title li{
                background-color: white;
                list-style: none;
	            float: left;
                width: 19.827%;
                height: 180px;
                text-align: center;
                overflow: hidden;
                padding: 0 1px;
                border-bottom: 1px solid #eee;
                font-size: 18px;
                font-family: Verdana, Geneva, Tahoma, sans-serif;
            }
            /* 被选中的li的样式 */
            .notice-title li.select{
                background: #f7faff;
                color: rgb(27, 57, 129);
                border-bottom: 1px solid #fff;
                border-left: 1px solid #eee;
                border-right: 1px solid #eee;
                font-weight: bold;
                padding: 0;
                font-family: Verdana, Geneva, Tahoma, sans-serif;

            }
            .notice-con .mod{
                background-color: #f7faff;
                display: none;
            }
            .notice-con .mod ul{
                display: inline-block;
                vertical-align: text-top;
                list-style: none;
                width: 18%;
                padding: 0;
                margin-left: 20px;
            }
            .notice-con .mod ul p{
                white-space: pre-wrap;
                margin: 0;
            }
            .notice-con .mod li{
                padding-top: 10px;
                font-size: 14px;
                word-break: break-word;
                white-space:pre-wrap;
            }
        </style>
    <body>
        <div class="tabs" style= "width: 100%;">    
            <div class="notice-title" style="height: 180px;">        
                <ul>            
                    <li><p>AAA</p></li>
                    <li><p>BBB</p> </li>
                    <li><p>CCC</p></li>
                    <li><p>DDD</p> </li>
                    <li><p>EEE</p></li>        
                </ul>    
            </div>    
            <!-- 具体内容 -->    
            <div class="notice-con">        
                <div class="mod" style="display: block;"></div>        
                <div class="mod"></div>        
                <div class="mod"></div>        
                <div class="mod"></div>        
                <div class="mod"></div>    
            </div>
        </div>
        <script type="text/javascript">    
            // tab    
            window.onload = function(){        
                // 获取标题和div        
                var titles = document.querySelector('.noticetitle').getElementsByTagName('li');        
                var divs = document.querySelector('.notice-con').getElementsByClassName('mod');        
                if(titles.length != divs.length){            
                    return;        
                }        
                // 遍历titles        
                for(var i=0; i<titles.length; i++){            
                    // 给每个title 添加id 互相区分            
                    titles[i].id = i;            
                    titles[i].onmouseover = function(){                
                        for(var j=0; j<titles.length; j++){
                            titles[j].className = '';
                            divs[j].style.display = 'none';
                        } 
                        this.className = 'select';  
                        divs[this.id].style.display = 'block'; 
                    }
                }
            }
        </script>
    </body>