效果如下：

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     // 選項卡下劃線
 3     var img = document.getElementById('img');
 4     function mt1(){
 5         img.style.left = '-7px';
 6     }
 7     function mt2(){
 8         img.style.left = '50px';
 9     }
10     function mt3(){
11         img.style.left = '120px';
12     }
13     function mt4(){
14         img.style.left = '210px';
15     }
16     function mt5(){
17         img.style.left = '300px';
18     }
19 </script>

應屆菜鳥，大神勿噴...