HTML+CSS+原生JS撸一个tab组件
2018-11-16 本文已影响25人
呼啦呀黑
tab组件是很常用的一个ui组件，之前一种的是第三方组件库中的;最近想巩固一下自己的javascript的基础就决定手动撸一个！
实现的功能
- 当鼠标移动到标题的时候，选中的标题底部有一条横线；
- 选中的标题对应的内容显示，其他标题的内容隐藏！
思路
- 底部横线可以用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)
总结
代码可能还有优化的地方，如果各位有自己的想法请在下面留言！谢谢！
