文章 - tab切换酷炫 | 前端网（QDFuns）

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>

#div1{
    width:600px;
    height:700px;
    border:1px solid red;
    margin:0 auto 0 auto;
    border-radius: 20px 20px 20px 20px;
}
    ul{
        list-style-type: none;
        margin:0 auto 0 auto;
        line-height: 100px;
    }
    ul li{
        width:100px;
        height:30px;
        border:1px solid red;
        text-align: center;
        line-height: 30px;
        display: inline-block;
        border-radius: 20px 20px 20px 20px;
        margin-left:50px;
        cursor: pointer;
        background-color: #ccc;
    }
    ul li.qjg{
        background-color:#AAFF05;
    }
    ul li a{
        text-decoration: none;
        color:#000;

}
    ul li a:hover{
        text-decoration: underline;
        color:#000;
    }
    #div2 div{
        width:600px;
        height:600px;
        border:1px solid red;
        border-radius: 20px 20px 20px 20px;
        display: none;
    }
    #div2 div.rhx{

display: block;
    }
    #div2 div.rhx img{
        max-height: 100%;
        max-width: 100%;
        border:1px solid red;
        border-radius: 20px 20px 20px 20px;
    }
    #div2 div img{
        max-height: 100%;
        max-width: 100%;
        border:1px solid red;
        border-radius: 20px 20px 20px 20px;
    }
</style>
<body>
<div id="div1">
    <ul id="ul">
        <li class="qjg"><a href="">男装</a></li>
        <li><a href="">女装</a></li>
        <li><a href="">冬装</a></li>
    </ul>
    <div id="div2">
        <div class="rhx">
            <img src="1.jpg" alt="这是老苍哦" title="这是老苍哦">
            <img src="2.jpg" alt="这是老苍哦" title="这是老苍哦">
            <img src="3.jpg" alt="这是老苍哦" title="这是老苍哦">
        </div>
        <div>
            <img src="4.jpg" alt="这是老苍哦" title="这是老苍哦">
            <img src="8.jpg" alt="这是老苍哦" title="这是老苍哦">
            <img src="9.jpg" alt="这是老苍哦" title="这是老苍哦">
        </div>
        <div>
            <img src="1.jpg" alt="这是老苍哦" title="这是老苍哦">
            <img src="2.jpg" alt="这是老苍哦" title="这是老苍哦">
            <img src="3.jpg" alt="这是老苍哦" title="这是老苍哦">
        </div>
    </div>
</div>
<script>
    var ul=document.getElementById('ul');
    var li=ul.getElementsByTagName('li');
    var div2=document.getElementById('div2');
    var div=div2.getElementsByTagName('div');
            for(var i=0; i<li.length; i++) {
                li[i].index=i;
                li[i].onmouseover=function () {
                    for(var i=0; i<li.length; i++) {
                        li[i].className='';
                        div[i].style.display='none';
                        // li[i].textDecoration='underline';
                    };
                    this.className='qjg';
                    div[this.index].style.display='block';
                }
            };
</script>
</body>
</html>

tab切换酷炫

评论 ( 5 )

最新评论

tab切换酷炫

评论 ( 5 )

最新评论

欢迎您回来

创建账号

找回密码