您的位置：首页 > Web前端

用多种方法实现tab标签切换

2016-12-08 17:20 537 查看
在开始之前先谈谈局外话，最近正在找工作，发现好多公司都要求在某某上面有文章发表，一次文章都没发过的我顿时感觉好尴尬，忙里偷闲发表点文章，毕竟第一次发，还有很多很多需要学习的地方，技术方面还有欠缺，望前辈们多多指点迷津！

昨天去面试，面试官让我手写一段代码实现tab标签的切换，因为家里有事，辞职了一个月，一个月都没写代码了，手生了不少，我竟然没写出来，今天我研究了一下，用了三种方法实现这种效果，分别是纯CSS，原生JS和JQuery。大家可以参考下，样式写的比较简单，只是实现了想要的效果，有不同想法的欢迎来吐槽

1、纯CSS的写法：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
display: inline-block;
width: 100%;
}
a:hover{
color: #fff;
}
ul{
width: 100%;
border-bottom: 2px solid red;
overflow: hidden;
}
li{
float: left;
text-align: center;
width: 22%;
list-style: none;
margin: 0 5px;
cursor: pointer;
line-height: 30px;
}
li:hover{
border-top-left-radius: 7px;
border-top-right-radius: 7px;
background-color: red;
color: #fff;
}
div.box{
margin-top: 10px;
width: 100%;
height: 200px;
border: 1px solid black;
cursor: pointer;
overflow: hidden;
text-align: center;
line-height: 200px;
}
div.box div{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<ul>
<li><a href="#tab1">标签1</a></li>
<li><a href="#tab2">标签2</a></li>
<li><a href="#tab3">标签3</a></li>
<li><a href="#tab4">标签4</a></li>
</ul>
<div class="box">
<div id="tab1">第1部分</div>
<div id="tab2">第2部分</div>
<div id="tab3">第3部分</div>
<div id="tab4">第4部分</div>
</div>
</body>
</html>


2、原生JS的写法：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul{
list-style: none;
float: left;
}
li{
width: 100px;
border: 2px solid #ccc;
text-align: center;
margin-top: -2px;
height: 50px;
line-height: 50px;
cursor: pointer;
}
.tab{
width: 300px;
height: 204px;
border: 2px solid #ececec;
display: none;
margin-left: 102px;
text-align: center;
line-height: 200px;
}
.hover{
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<ul id="ul1">
<li class="hover">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
<div class="tab" style="display:block;">第一部分</div>
<div class="tab">第二部分</div>
<div class="tab">第三部分</div>
<div class="tab">第四部分</div>
<script type="text/javascript">
var lis = document.getElementsByTagName("li");
var divs = document.getElementsByTagName("div");
for(var i=0; i<lis.length; i++){
//循环把i的值赋值给li的index
lis[i].index = i;
lis[i].onmouseover = function(){
//移除每个li上存在的类
for(var j=0; j<lis.length; j++){
lis[j].className = "";
}
//给当前li添加类
this.className ="hover";
//隐藏每个div
for(var i=0; i<divs.length; i++){
divs[i].style.display="none";
}
//根据索引显示相应的div
divs[this.index].style.display = "block";
}
}
</script>
</body>
</html>


3、JQuery的写法：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
display: none;
}
ul{
width: 100%;
border-bottom: 2px solid red;
overflow: hidden;
}
li{
float: left;
text-align: center;
width: 30%;
list-style: none;
margin: 0 5px;
cursor: pointer;
line-height: 30px;
}
.show{
border-top-left-radius: 7px;
border-top-right-radius: 7px;
background-color: red;
color: #fff;
}
div.tab{
margin-top: 10px;
width: 100%;
height: 200px;
border: 1px solid black;
cursor: pointer;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<ul>
<li class="show">标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<div class="show0 tab" style="display: block;">第一部分</div>
<div class="show1 tab">第二部分</div>
<div class="show2 tab">第三部分</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('li').hover(function(){
//获取所有的li标签并移除类
$(this).siblings().removeClass('show');
//给当前的li添加类
$(this).addClass('show');
//隐藏所有的div
$('div').hide();
//获取当前li的索引
var index=$('li').index($(this));
//拼凑相应的div的类
var index1='show'+index;
//根据相应的类显示相应的div
$('div.'+index1).show();
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  tab标签切换 web前端
相关文章推荐
新的分享
章节导航