<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.3.min.js"></script>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
margin: 0 auto;
}
.box li{
width: 50px;
height: 30px;
line-height: 30px;
float: left;
background: #eee;
list-style: none;
cursor: pointer;
}
.box .item{
border-bottom: 1px solid #e5e5e5;
-webkit-transition: border-bottom 0.5s linear 0s;
transition: border-bottom 0.5s linear 0s;
}
.box .item.active{
border-bottom: 1px solid red;
}
</style>
<body>
<div class="box">
<ul>
<li class="item">tab1</li>
<li class="item">tab2</li>
</ul>
</div>
<script>
$('.item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
})
</script>
</body>
</html>
tap切换延迟
最新推荐文章于 2021-12-09 16:23:40 发布