关于html:选项卡

5次阅读

共计 1725 个字符，预计需要花费 5 分钟才能阅读完成。

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>

JS

<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>

正文完