JavaScript之Tab标签（原始版）

最原始的Tab标签页，只需再添加CSS样式即可，重点在于Tab标签底部边框样式的处理。待完善：代码的封装与复用。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div.tab div{
            display: inline;
            padding: 5px;
            margin:5px;
        }
        /*.hover{
            border-bottom: 2px solid white;
            border-top: 1px solid blue;
            border-left: 1px solid blue;
            border-right: 1px solid blue;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }
        .out{
            border-bottom: none;
            border-top: none;
            border-left: none;
            border-right: none;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }*/
        div.content{
            height: 158px;
            width: 185px;
            overflow: hidden;
            border-top: 1px solid blue;
            margin-top: 6px;
            margin-left: 5px;
        }
        div.content div{
            width: 185px;
            height: 150px;
            border-top: none;
            display: none;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="tab">
            <div>标题1</div>
            <div>标题2</div>
            <div>标题3</div>
        </div>
        <div class="content">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <script type="text/javascript">
        var tab=document.getElementsByClassName('tab')[0];
        var tabs=tab.getElementsByTagName('div');
        var content=document.getElementsByClassName('content')[0];
        var contents=content.getElementsByTagName('div');
        console.log(contents);
        for (var i = 0; i < tabs.length; i++) {
            ;(function (j){
                tabs[i].onmouseout=function(){
                    for (var i = 0; i < contents.length; i++) {
                        contents[i].style.display='none';
                    }
                    tabs[j].style.borderBottom='none';
                    tabs[j].style.borderTop='none';
                    tabs[j].style.borderLeft='none';
                    tabs[j].style.borderRight='none';
                    tabs[j].style.borderTopLeftRadius='0';
                    tabs[j].style.borderTopRightRadius='0';
            }})(i);
            ;(function (j){
                tabs[i].onmouseover=function(){
                    for (var i = 0; i < contents.length; i++) {
                        contents[i].style.display='none';
                    }
                    contents[j].style.display='block';
                    tabs[j].style.borderBottom='2px solid white';
                    tabs[j].style.borderTop='1px solid blue';
                    tabs[j].style.borderLeft='1px solid blue';
                    tabs[j].style.borderRight='1px solid blue';
                    tabs[j].style.borderTopLeftRadius='4px';
                    tabs[j].style.borderTopRightRadius='4px';
            }})(i);
        }
    </script>
</body>
</html>

 

posted @ 2017-10-28 16:08  learn_by_doing  阅读(317)  评论(0)  编辑  收藏  举报