JavaScript之Tab标签(原始版)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于JavaScript之Tab标签(原始版)的主要内容,如果未能解决你的问题,请参考以下文章

Javascript代码按CTRL + TAB?

JavaScript+css+html之菜单栏切换

javascript (原始)数组片段

标签视图中的 Android 操作栏搜索

片段存储和重用:使用TabView的多个子片段

在tablayout viewpager中运行调整选项卡片段