废话不多说，直接上代码：
<!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>在线浏览
