吐槽下这编辑器居然还没有居中的。当当当当,我又回来了,请了一周假去学校毕业,舒服,今天回来就是各种赶,一天做了三个页面。其中比较值得分享的还是这个tab组件。先上图:
那么大致上的效果就是当我点击tab1的时候显示的是content1内容块,点击tab2或3的时候显示为content2或3内容。
好了,先上代码块:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>实现Tab组件</title>
<link rel="stylesheet" type="text/css" href="tab.css">
</head>
<body>
<div id="container1">
<ul class="tab-list">
<li class="tab-item" href="panel-1">tab1</li>
<li class="tab-item" href="panel-2">tab2</li>
<li class="tab-item" href="panel-3">tab3</li>
</ul>
<div class="panel active" id="panel-1">content1</div>
<div class="panel" id="panel-2">content2</div>
<div class="panel" id="panel-3">content3</div>
</div>
<script>
/**
* Tab 组件
* @param {String} containerId 容器Id
*/
function Tab(containerId)
{
var cont1 = document.getElementById(containerId);
// 获取tab组
var tab_items = cont1.getElementsByClassName('tab-item');
// 获取panel组
var pls = cont1.getElementsByClassName('panel');
// console.log(tab_items);
for(let i = 0;i < tab_items.length;i++){
// var tab_sel = document.getElementById(tab_items[i].attributes["href"].value);
// console.log(tab_sel);
tab_items[i].onclick = function(e){
console.log(e);
// console.log(index);
// console.log(tab_items.length);
for(let j = 0;j<tab_items.length;j++){
// console.log(j);
if(i == j){
pls[i].style.display = "block";
}else{
pls[j].style.display = "none";
}
}
}
}
}
/**
* active 方法,可以控制第几个 Tab 组件显示
* @param {Number} index 要显示的 tab 的序号,从0开始
*/
Tab.prototype.active = function (index)
{
}
var tab = new Tab('container1');
</script>
</body>
</html>
还是老样子,取其中重要代码讲下思路就是:
1.首先获取容器,tab组和panel组(content)
2.循环每个tab为其添加onclick方法,点击时触发
3.当其被点击时,遍历panel组,改变其对应的内容块display属性为block,而其他的全部为none
当然也可以为其添加样式,这里大家自由发挥就好了
那么有什么用呢,比如可以这样用:
在订单页面,可以在tab下面添加border-bottom,以及改变其字体颜色,这里不做过多赘述了,虽然是很基础的东西,不过今天再次用到了,就顺手拿出来记录下,哈哈,健身去了。
for(let i = 0;i < tab_items.length;i++){
// var tab_sel = document.getElementById(tab_items[i].attributes["href"].value);
// console.log(tab_sel);
tab_items[i].onclick = function(e){
console.log(e);
// console.log(index);
// console.log(tab_items.length);
for(let j = 0;j<tab_items.length;j++){
// console.log(j);
if(i == j){
pls[i].style.display = "block";
tab_items[i].style.cssText = 'color: black;border-bottom: 0.1rem solid rgb(254,210,61);';//test
}else{
pls[j].style.display = "none";
tab_items[j].style.cssText = 'color:gray;border-bottom:none;';
}
}
}
}