美文网首页
HTML+CSS+原生JS撸一个tab组件

HTML+CSS+原生JS撸一个tab组件

作者: 呼啦呀黑 | 来源:发表于2018-11-16 18:44 被阅读25次

    tab组件是很常用的一个ui组件,之前一种的是第三方组件库中的;最近想巩固一下自己的javascript的基础就决定手动撸一个!

    实现的功能
    • 当鼠标移动到标题的时候,选中的标题底部有一条横线;
    • 选中的标题对应的内容显示,其他标题的内容隐藏!
    思路
    1. 底部横线可以用css中的border-bottom属性来实现。我们可以写两种样式。这两种样式一种是默认的样式即未选中时候的样式;另外一种是选中的时候的样式;我们为了操作简单就将选中的样式用一个className 进行区分!(当然你也可以直接用js来直接修改css样式,但是我更加推荐用class名来区分,这样子便于维护!省的以后都不知道哪个js可以改变样式!)
      2.内容的切换可以通过增加和删除className来实现。className对应的css设置display的none/block来控制内容的显示与不显示!
      3.只要保证标题和内容的dom的数量一致就可以通过获取title的id属性来控制对应的content内容的显示与否!

    html代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>tabs</title>
        <link rel="stylesheet" href="./tab.css">
    </head>
    <body>
        <div class="gui-tab-main" >
            <div class="gui-tab-title">
                <ul id="gui-tab-title-item">
                   <li>1</li>
                   <li>2</li>
                   <li>3</li>
                   <li>4</li>
                   <li>5</li>
                </ul>
            </div>
            <div class="gui-tab-content">
                <ul id="gui-tab-content-item">
                    <li>content1</li>
                    <li>content2</li>
                    <li>content3</li>
                    <li>content4</li>
                    <li>content5</li>
                </ul>
            </div>
        </div>
    </body>
    <script src="./tab.js"></script>
    </html>
    

    css代码

    * {
        margin: 0;
        padding: 0;
        
    }
    ul li {
        list-style: none;
    }
    .gui-tab-main {
        width:400px;
        height:300px;
        background-color: antiquewhite;
    }
    .gui-tab-title {
        position:absolute;
        background-color: aqua;
        width: 400px;
        height: 50px;
    }
    .gui-tab-title ul li {
        float: left;
        width: 78px;
        height: 50px;
        padding: 0 1px;
        text-align: center;
        line-height: 50px;
        cursor: pointer
    }
    .gui-tab-title ul li.selected {
        border-bottom: 2px solid blue;
    }
    .gui-tab-content {
        position:absolute;
        top:50px;  
        height: 300px;  
    }
    .gui-tab-content ul {
        height:100%;
    }
    .gui-tab-content ul li {
        height: calc(100% - 50px);
        display: none;
    }
    .gui-tab-content ul li.selected {
        display: block
    }
    

    js代码

    ;(function(window,undefined){
        window.onload = function(){
            //  todos
            //  1.当鼠标点击或者移到某个标题的时候显示对应的内容;
            //  2.被点击或者鼠标放置的标题背景高亮,其他标题背景不变!
            var titles = document.getElementById('gui-tab-title-item').getElementsByTagName('li');
            var contents = document.getElementById('gui-tab-content-item').getElementsByTagName('li');
            if(titles.length!== contents.length){
                return ;
            }        
            for(var i=0,len=titles.length;i<len;i++){
                // 给所有的标题加上一个id;这个很重要!后面的contents的功能需要用到
                titles[i].id = i;
                titles[i].onmouseover = function(){
                    //清除titles和contents所有的名为selected的class
                    for(var j=0;j<len;j++){
                        titles[j].classList.remove('selected');
                        contents[j].classList.remove('selected');
                    }
                    this.className = 'selected';
                    contents[this.id].className = 'selected';
                }
            }
        }
    })(window)
    

    总结

    代码可能还有优化的地方,如果各位有自己的想法请在下面留言!谢谢!

    相关文章

      网友评论

          本文标题:HTML+CSS+原生JS撸一个tab组件

          本文链接:https://www.haomeiwen.com/subject/dbnyfqtx.html