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

96
呼啦呀黑
2018.11.16 18:44 字数 385

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)

总结

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

造轮子
Web note ad 1