tabs切换是前端工作中经常用到的,今天,我就将我自己经常用到的两种方法分享给大家。为什么会有两种呢?对于简单的项目来说,不需要引入JQ,也可以简单实现。
JavaScript实现tabs切换
言归正传,上图为证。【本例源码下载】
HTML代码布局:
<div class="tabs">
<div class="tab" onclick="changeTab(0)">Who am I?</div>
<div class="tab" onclick="changeTab(1)">What can I do?</div>
<div class="tab" onclick="changeTab(2)">Where is me?</div>
</div>
<div class="tab-content">
<div class="content" style="display: block;">Content 1</div>
<div class="content">Content 2</div>
<div class="content">Content 3</div>
</div>
CSS 样式表:
body{
background: #f3f3f3;
}
.tabs{
width: 50%;
height: 36px;
background-image: linear-gradient(270deg, #a1c4fd 0%, #c2e9fb 100%);
position: fixed;
padding-top: 10px;
left: 50%;
top: 100px;
transform: translate(-50%, -50%);
border-radius: 15px 15px 0px 0px ;
}
.tabs div{
float: left;
background: #f3f3f3;
margin-left: 10px;
padding: 8px 15px;
width: auto;
border-radius: 10px 10px 0px 0px ;
font-size: 0.8rem;
text-align: center;
cursor: pointer;
color: #999;
}
.tabs .tab.active{
background: #fff;
color: #000;
}
.tab-content{
width: 50%;
background: #fff;
position: fixed;
padding-top: 10px;
left: 50%;
top: 150px;
transform: translate(-50%, -50%);
border-radius: 0px 0px 10px 10px;
padding: 20px;
box-sizing: border-box;
}
.tab-content .content { display: none; }
JS代码:
function changeTab(index) {
var i, tabs, contents;
tabs = document.getElementsByClassName("tab"); // 获取所有的tab
contents = document.getElementsByClassName("content"); // 获取所有的内容区域
// 移除所有tab的激活状态
for (i = 0; i < tabs.length; i++) {
tabs[i].className = tabs[i].className.replace(" active", "");
}
// 隐藏所有内容区域
for (i = 0; i < contents.length; i++) {
contents[i].style.display = "none";
}
// 激活当前选中的tab
tabs[index].className += " active";
// 显示当前选中的内容区域
contents[index].style.display = "block";
}
JQ版本实现的Tabs切换
一样上图为证:【本例源码下载】
引用JQ:
因为这里要使用JQ写切换程序,所以别忘了导入库文件。我这里使用了百度CDN的版本。
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
HTML代码布局如下:
<!--这是菜单-->
<div class="tabs">
<div list="0" onclick="tab(this)">我是A</div>
<div list="1" onclick="tab(this)">我是B</div>
<div list="2" onclick="tab(this)">我是C</div>
<div list="3" onclick="tab(this)">我是D</div>
</div>
<!--这是菜单对应的内容-->
<div class="tab-content">
<div style="display:block;" onclick="cont(this)">我是A的内容</div>
<div onclick="cont(this)">我是B的内容</div>
<div onclick="cont(this)">我是C的内容</div>
<div onclick="cont(this)">我是D的内容</div>
</div>
JQ代码如下:
//点击菜单执行函数 使用click()方法模拟点击事件,触发下面的cont函数
function tab(param){
var sp_an=$(param).attr('list');//获取被点击菜单的list属性值(0,1,2,3)
$('.tab-content').children('div').eq(sp_an).click();//点击菜单后,对应的内容被点击,从而实现展示
$(param).addClass('active'); // 给触发的菜单增加一个属性,用于表现激活样式
$(param).siblings().removeClass('active'); // 移除其他为激活的tab菜单
}
//这个函数的触发是通过点击菜单的时候触发的
function cont(param){
$(param).show();//被选中的内容显示
$(param).siblings().hide();//没有被选中的内容隐藏
$(param).siblings().removeClass('active');
}
加入CSS样式表
可以看到,两种代码实现的效果是完全一样的。因为CSS样式代码是完全一样的。这里就不再重复发一遍了。