Tab标签

mttp02

已于 2023-01-17 23:51:08 修改

阅读量203

点赞数

文章标签： javascript 前端 css

于 2023-01-17 22:53:37 首次发布

本文链接：https://blog.csdn.net/m0_74348480/article/details/128721600

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab</title>
    <link rel="stylesheet" >
<style>
    *{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color: #000;
}
#tab{
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
    margin: 100px auto;/*让盒子到中间来*/
   /* overflow: hidden;*//*超出部分全部隐藏*/
}
#tab_header{
    background-color: #e8e8e8;
    height: 28px;
    line-height: 28px;
}
#tab_header ul{
    width: 500px;
    cursor: pointer;
}
#tab_header ul li{
    float: left;
    width: 98px;
    text-align: center;
    padding: 0 1px;
    border-bottom: 1px solid #ccc;
}
#tab_header ul li.selected{
    background-color: #fff;
    border-bottom: none;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 0;
}
#tab_header ul li:nth-child(1){
    border-left: none;
}
#tab_header ul li:nth-last-child{
    border-right: none;
}
#tab_header ul li:hover{
    font-weight: bolder;
    color: orangered;
}

#tab_content .dom{
    padding-top: 20px;
    display: none;
}
#tab_content .dom ul li{
    float: left;
    width: 220px;
    text-align: center;
    margin: 5px;
}
#tab_content .dom ul li a:hover{
    color: orangered;
}
</style>
<div id="tab">
    <!--头部内容-->
    <div id="tab_header">
        <ul>
            <li class="selected">英雄联盟</li>
            <li>风暴英雄</li>
            <li>DOTA</li>
            <li>300英雄</li>
            
        </ul>
    </div>
    <!--尾部内容-->
    <div id="tab_content">
        <div class="dom" style="display:block">
            <ul>
                <li><a href="#">介绍1</a></li>
                
            </ul>
        </div>
        <div class="dom">
            <ul>
                <li><a href="#">介绍2</a></li>
                
            </ul>
        </div>
        <div class="dom">
            <ul>
                <li><a href="#">介绍3</a></li>
                
            </ul>
        </div>
        <div class="dom">
            <ul>
                <li><a href="#">介绍4</a></li>
              
            </ul>
        </div>
       
    </div>
</div>
<script >
window.onload = function () {

    var allLi=$('tab_header').getElementsByTagName("li");
    var alldom=$('tab_content').getElementsByClassName("dom");

    for(var i=0;i<allLi.length;i++){
        var li=allLi[i];
        li.index=i;//处理同步和异步
        //2.1判断进到里面需要做什么事情
        li.onmouseover = function () {
            for( var j=0;j<allLi.length;j++){
                allLi[j].className=" ";
            }//首先要让全部不被选中,然后再让当前的li被选中
            this.className="selected";

            for(var j=0;j<alldom.length;j++){
                alldom[j].style.display="none";
            }
            alldom[this.index].style.display="block";
        }
    }
};

function $(id) {
    return typeof id==="string"?document.getElementById(id):null;
}
</script>

获取标签，监测鼠标的位置，根据位置传递style

mttp02

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Tab标签

Tab标签
复制链接

扫一扫

Tab标签

“相关推荐”对你有帮助么？