效果如下：
1.html代码：
1 <div class="center-left-tap"> 2 <a href="javascript:void (0)" style="color: #1c1c1c;" class="current" onclick="mt1()">最新</a> 3 <a href="javascript:void (0)" class="a-hover" onclick="mt2()">B2C</a> 4 <a href="javascript:void (0)" class="a-hover" onclick="mt3()">C2C</a> 5 <a href="javascript:void (0)" class="a-hover" onclick="mt4()">传统零售</a> 6 <a href="javascript:void (0)" class="a-hover" onclick="mt5()">其他</a> 7</div> 8 9 10 11 <!--引入下划线图片文件-->12<div class="Tab-img">13 <img src="img-index/new-highline.png" alt="" id="img">14 </div>
2.css代码：
1 .center-left-tap{height: 58px;}2 .center-left-tap a{font-size: 16px;color: #999;margin-right: 37px;padding-bottom: 19px;}3 .a-hover:hover{color: #595959;}4 5 /*下化线*/6 .Tab-img{position: relative}7 #img{position: absolute;top: -20px;left: -7px;width: 9%;transition: all 1s;}
3.js代码：
1 <script> 2// 选项卡下划线 3var img = document.getElementById('img'); 4function mt1(){ 5 img.style.left = '-7px'; 6} 7function mt2(){ 8 img.style.left = '50px'; 9}10function mt3(){11 img.style.left = '120px';12}13function mt4(){14 img.style.left = '210px';15}16function mt5(){17 img.style.left = '300px';18}19 </script>
应届菜鸟，大神勿喷...
