选项卡

站长

2022年09月08日 21:17 · 阅读数 29

选项卡 CSS

.ele{
    height: 20px;
}
ul{
    list-style: none;
}
ul li {
    padding-right: 30px;
    float: left;
}
a {
    text-decoration: none;
    color: black;
}
.active a {
    border-bottom: 2px solid #F40;
}
a:hover{
    color: #f40;
}
.elec {
    width: 220px;
    margin-top: 5px;
    margin-left: 40px;overflow-x: auto;
    
}
.elec p {
    
    padding-left: 2px;
    border-left: 1px solid #f40;
    font-size: 14px;
    overflow: hidden;/*溢出隐藏*/
    text-overflow:ellipsis;/*隐藏部分显示省略号*/
    white-space: nowrap;/*文本一行显示*/
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>tab选项卡代码</title>
        <style type="text/css">
            
            .title {
                width: 500px;
                height: 50px;
                color: black;
                border: 1px solid gray;
                margin: 0;
                display: flex;
            }
            
            .title span {
                width: 80px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                float: left;
                font-family: "微软雅黑";
                font-size: 24px;
                flex: 1;
                border-right: 1px solid black;
            }
            .title span:nth-child(3){
                border-right: none;
            }
            .tab {
                color: red;
                background-color: #999;
                cursor: pointer;
            }
 
            #tab>div {
                width: 500px;
                height: 200px;
                border: 1px solid gray;
                display: none;
                text-align: center;
                line-height: 200px;
                font-family: "微软雅黑";
                font-size: 24px;
            }
            
            #tab .content {
                display: block;
            }
        </style>
    </head>
 
    <body>
        <div id="tab">
            <h2 class="title">
                <span class="tab" onmouseover="changeTab(this)">选项一</span>
                <span onmouseover="changeTab(this)">选项二</span>
                <span onmouseover="changeTab(this)">选项三</span>
            </h2>
            <div class="content" style="background: greenyellow;">内容一</div>
            <div style="background: cyan;">内容二</div>
            <div style="background: goldenrod;">内容三</div>
        </div>
    </body>
 
</html>

<script type="text/javascript">
    // 获取所有的span标签组
    var tabs = document.getElementById("tab").getElementsByTagName("span");
    // 获取所有的div标签组
    var cts = document.getElementById("tab").getElementsByTagName("div");
 
    function changeTab(current) {
        for(i = 0; i < tabs.length; i++) {
            if(tabs[i] == current) {
                tabs[i].className = "tab";
                cts[i].className = "content";
            } else {
                tabs[i].className = "";
                cts[i].className = "";
            }
        }
    }
</script>