您的位置：首页 > 其它

最简单的tab页面切换+动画

2017-07-11 10:46 253 查看

废话不多说，直接上代码：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
.container div{
display: none;
padding: 12px;
font-size: 18px;
}
.container div:target{
display: block;
}
.nav{
display: flex;
justify-content: space-around;
align-items: center;
}
.nav a{
height: 30px;
text-decoration: none;
color: #666;
font-size: 18px;
}
.line{
height: 2px;
width: 30px;
background-color: red;
margin-top: 5px;
position: relative;
top: 30px;
left: 0;
transition: all 0.3s;

}
.nav .active{
color: red;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>

<div class="line"></div>
<div class="nav">
<a class="active" href="#item1"> 精选</a>
<a href="#item2">大咖大咖</a>
<a href="#item3">出版</a>
<a href="#item4">男生</a>
<a href="#item5">漫画</a>
</div>
<div class="container">
<div id="item1">精选</div>
<div id="item2">大咖大咖</div>
<div id="item3">出版</div>
<div id="item4">男生</div>
<div id="item5">漫画</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$('.line').css('transform', 'translateX(' + $('a').first().offset().left + 'px)');
$('.nav a').on('click', function () {
$('.line').width($(this).width());
$(this).addClass('active').siblings().removeClass('active');
var left = $(this).offset().left;
$('.line').css({
'transform': 'translateX(' + left + 'px)'
})
});
</script>
</body>
</html>

在线浏览

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： tab

相关文章推荐

新的分享

章节导航