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

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

实现的功能

当鼠标移动到标题的时候，选中的标题底部有一条横线；

选中的标题对应的内容显示，其他标题的内容隐藏！

思路

底部横线可以用css中的border-bottom属性来实现。我们可以写两种样式。这两种样式一种是默认的样式即未选中时候的样式；另外一种是选中的时候的样式；我们为了操作简单就将选中的样式用一个className 进行区分！(当然你也可以直接用js来直接修改css样式，但是我更加推荐用class名来区分，这样子便于维护！省的以后都不知道哪个js可以改变样式！)

2.内容的切换可以通过增加和删除className来实现。className对应的css设置display的none/block来控制内容的显示与不显示！

3.只要保证标题和内容的dom的数量一致就可以通过获取title的id属性来控制对应的content内容的显示与否！

html代码

tabs

1

2

3

4

5

content1

content2

content3

content4

content5

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

总结

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