在开始之前先谈谈局外话,最近正在找工作,发现好多公司都要求在某某上面有文章发表,一次文章都没发过的我顿时感觉好尴尬,忙里偷闲发表点文章,毕竟第一次发,还有很多很多需要学习的地方,技术方面还有欠缺,望前辈们多多指点迷津!
昨天去面试,面试官让我手写一段代码实现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;