tab简单实例

最新推荐文章于 2021-06-03 17:58:08 发布

weixin_30917213

最新推荐文章于 2021-06-03 17:58:08 发布

阅读量85

点赞数

文章标签： java

原文链接：http://www.cnblogs.com/johnny-cli/p/7611143.html

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            box-sizing: border-box;
        }

        #ul {
            list-style: none;
            width: 100%;
        }

        #ul li.fli {
            font-weight:bold;">#ccc;
            color: red;
        }

        ul {
            overflow: hidden;
            zoom: 1;
            list-style-type: none;
        }

        #ul li {
            float: left;
            width: 25%;
        }

        #divs {
            width: 300px;
            height: 300px;
        }

        #divs div {
            width: 300px;
            height: 300px;
            display: none;
            border: 1px solid red;
        }

        #divs div.fdiv {
            display: block;
            font-weight:bold;">yellow;
        }
        span{
            margin-left: 134px;
        }
    </style>
</head>
<body>
<div class="div">
    <ul id="ul">
        <li class="fli">鞋子</li>
        <li>袜子</li>
        <li>背包</li>
        <li>衣服</li>
    </ul>
    <div id="divs">
        <div class="fdiv">
            <span >鞋子</span>
        </div>
        <div>
            <span>袜子</span>
        </div>
        <div>
            <span>背包</span>
        </div>
        <div>
            <span>衣服</span>
        </div>
    </div>
</div>
<div style="width:300px;height: 120px;background:skyblue;">

</div>
<script>
    var lis = document.getElementById('ul').getElementsByTagName('li');
    var divs=document.getElementById('divs').getElementsByTagName('div');
    for(var i=0;i<lis.length;i++){
        lis[i].οnclick=function(){
            change(this);
        }
    }
    function change(obj){
        for(var i=0;i<lis.length;i++){
            if(lis[i]==obj){
                lis[i].className='fli';
                divs[i].className='fdiv'
            }
            else{
                lis[i].className='';
                divs[i].className='';
            }
        }
    }
</script>
</body>
</html>