div+css+js模拟tab

最新推荐文章于 2022-08-27 11:00:43 发布

mrtuzi

最新推荐文章于 2022-08-27 11:00:43 发布

阅读量619

点赞数

分类专栏： javascript html 文章标签： div tab

本文链接：https://blog.csdn.net/mrtuzi/article/details/5034802

版权

javascript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

div+css+js模拟tab,

我这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS

当然,你得会DIV才行.

js的话,太简单了.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>div+css+js模拟tab</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            text-align: center;
            background-color: #CCC
        }

        #header ul {
            padding: 0;
            margin: 0
        }

        #header ul li {
            list-style: none;
            float: left
        }

        #header ul li span {
            display: inline-block;
            border: 1px solid #000;
            cursor: hand;
        }

        #ccc {
            clear: both;
            background-color: #009933;
            text-align: left
        }

        #ccc div.cont {
            display: none
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div id="header">
            <ul>
                <li><a href="#" href="#"><span>框1111</span></a></li>
                <li><a href="#" href="#"><span>框2222</span></a></li>
                <li><a href="#" href="#"><span>框3333</span></a></li>
                <li><a href="#" href="#"><span>框4444</span></a></li>
            </ul>
        </div>
        <div id="ccc">
            <div class="cont"> 这里是内容撒．111．．<br /> 这里是内容撒．111．．<br /> 这里是内容撒．111．．<br /> </div>
            <div class="cont"> 这里是内容撒. 222．．<br /> 这里是内容撒．222．．<br /> 这里是内容撒．222．．<br /> </div>
            <div class="cont"> 这里是内容撒．333．．<br /> 这里是内容撒．333．．<br /> 这里是内容撒．333．．<br /> </div>
            <div class="cont"> 这里是内容撒．444．．<br /> 这里是内容撒．444．．<br /> 这里是内容撒．444．．<br /> </div>
        </div>
    </div>
    <script type="text/javascript">
        function $(o){return document.getElementById(o)} 
        var ospan=$('header').getElementsByTagName('span'); 
        var odiv=$('ccc').getElementsByTagName('div');
        for(var i=0;i<ospan.length;i++){ 
            ospan[i].alt=i;
            ospan[i].onclick=function(){ 
                var nid=parseInt(this.alt);hidAll(); this.style.backgroundColor='#fff' ;
                odiv[nid].style.display='block' ; 
            }
        } 
        function hidAll(){ 
            for(var i=0;i<odiv.length;i++){
                odiv[i].style.display='none' ; 
                ospan[i].style.backgroundColor='' ; 
            } 
        }
    </script>
</body>
</html>