学习tab栏切换必备,快速上手排它算法
Posted 她还会来吗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习tab栏切换必备,快速上手排它算法相关的知识，希望对你有一定的参考价值。
前言
之前学习Tab栏操作的时候,了解到一种新的算法思想(排它思想),趁着今天闲暇之余,写下这篇博客,希望可以给读者朋友们提供帮助。
算法简介
何为排他算法呢,简单点来说就是干掉所有人,留下我自己(干就完了),只要牢记这段口诀,相信学习起来就不会很难了！！
何时使用
当存在多个元素的情况下,我们需要给其中的一个元素设置样式(留下我自己),而其它元素则保持原来状态(干掉所有人)，这时我们的排它思想就华丽登场了~~~
案例效果
下面是我做的一个tab栏效果,请大家仔细思考🤔其中的排它思想，注意观察上面文字的背景
代码介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
li{
list-style: none;
}
a{
text-decoration: none;
font-size: 16px;
}
.tab{
width: 700px;
height: 300px;
margin: 100px auto;
}
.tab .tab_list{
width: 100%;
height: 40px;
border-bottom: 2px solid #e4e4e4;
}
.tab .tab_list ul li{
float: left;
height: 38px;
line-height: 38px;
margin: 0 16px 0 0;
cursor: pointer;
}
.tab .tab_con{
height: 240px;
margin-top:8px;
background-color: #fff;
}
.tab .tab_con .item{
height: 240px;
}
.tab .tab_con .item .left{
float: left;
width: 400px;
height: 240px;
}
.tab .tab_con .item .left img{
width: 400px;
height: 240px;
}
.item{
display: none;
}
.current{
background-color: #b1191a;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item"style="display: block;">
<div class="left" >
<a href="">
<img src="./../课题/img/text.jpg" alt="">
</a>
</div>
</div>
<div class="item ">
<div class="left">
<a href="">
<img src="./../课题/img/timg2.jpg" alt="">
</a>
</div>
</div>
<div class="item ">
<div class="left">
<a href="">
<img src="./../轮播图/img/ebfe6248a8e5973ae3f1f1b8cca6f10c.jpeg" alt="">
</a>
</div>
</div>
<div class="item ">
<div class="left">
<a href="">
<img src="./../轮播图/img/c07e7a7d592b9de571eb86b45f13531b.jpeg" alt="">
</a>
</div>
</div>
<div class="item ">
<div class="left">
<a href="">
<img src="./../轮播图/img/02374b8e81521da118ef60fc481de725.jpeg" alt="">
</a>
</div>
</div>
</div>
</div>
</body>
<script>
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for(var i = 0; i <lis.length; i++)
{ // 给选中的标签添加自定义属性,为的是实现tab栏切换时,获取相应的索引
lis[i].setAttribute('index',i);
lis[i].onclick = function(){
// 给点击的li元素添加背景颜色,没点击的则就不添加
for(var i = 0; i <lis.length; i++)
{
lis[i].className = '';
// 干掉所有人
}
// 留下我自己
this.className = 'current';
// 获取自定义属性
var index = this.getAttribute('index');
// 将点击之后的li所对应的图片显示出来,别的则隐藏
for(var i = 0; i <items.length; i++)
{ // 干掉所有人
items[i].style.display = 'none';
}
// 留下我自己
items[index].style.display = 'block';
}
}
</script>
</html>
结语
在我看来,其实排它算法是最简单的一种算法(也确实是最简单的),熟能生巧,只要多做案例,必然能脑想排它来！！
以上是关于学习tab栏切换必备,快速上手排它算法的主要内容，如果未能解决你的问题，请参考以下文章