一.使用js实现导航行栏，点击时，下划线会跟着鼠标的点击移动。

html代码如下：

<header><divid="nav1"><divid="id1"class="item">1</div><divid="id2"class="item">2</div><divid="id3"class="item">3</div></div><divid="line"></div></header>

css代码如下：

*{margin:0;padding:0;}body{background:url("./img/wallhaven1.png");}.item{width:100px;height:30px;margin-bottom:5px;margin-left:5px;padding:5px10px;background:#B89C9B;text-align:center;line-height:30px;color:white;border-radius:10px;}#line{color:red;width:4px;height:40px;background:red;position:absolute;top:0px;padding-right:1px;}

js代码如下：

<script>functionavtiveLineTop(n){document.getElementById('line').style.top=n+'px';};varnav1=document.getElementById("nav1");varitems=document.getElementsByClassName('item');nav1.addEventListener("click",handle,false);functionhandle(event){varevent=event||window.event;vartarget=event.target||event.srcElement;;switch(target.id){case"id1":avtiveLineTop(0);break;case"id2":avtiveLineTop(45);break;case"id3":avtiveLineTop(90);break;}}</script>

效果图：

默认时，红色横线在1标签处，点击2时，红色标签，会根据移动函数进行移动，如图（2）

二.在此基础上，根据css3来实现横线的过度平滑效果。

html代码如下：

<section><ulid="nav2"><liclass="item1"><ahref="#"id="id11">课程学习</a></li><liclass="item1"><ahref="#"id="id21">课程笔记</a></li><liclass="item1"><ahref="#"id="id31">课程练习</a></li><liclass="item1"><ahref="#"id="id41">课程相关</a></li><liclass="item1"><ahref="#"id="id51">课程拓展</a></li></ul><divid="line1"></div></section><div></div><divid="pic"><imgsrc="./img/wallhaven3.png"alt="人物"></div>

css代码如下：

.item1{width:100px;height:30px;margin-bottom:5px;margin-left:5px;padding:5px10px;background:#1E293B;float:left;text-decoration:none;color:white;line-height:30px;border-radius:10px;}#line1{color:red;width:120px;height:2px;background:red;position:absolute;top:175px;left:5px;padding-top:1px;}#nav2{list-style-type:none;}#nav2a{display:block;text-decoration:none;color:white;}#nav2a:hover{background-color:#1E291a;color:red;}#pic{margin-top:80px;margin-left:10px;}img{width:200px;height:200px;border-radius:15px;}.effect0{transform:translateX(1px);transition:all2s;}.effect{transform:translateX(125px);transition:all2s;}.effect2{transform:translateX(250px);transition:all2s;}.effect3{transform:translateX(375px);transition:all2s;}.effect4{transform:translateX(500px);transition:all2s;}.piceffect{transform:translateX(600px)scale(1.5);transition:all2s;}

js代码如下：

varnav2=document.getElementById('nav2');varpic=document.getElementById('pic');nav2.addEventListener("click",move,false);functionmove(event){varevent=event||window.event;vartarget=event.target||event.srcElement;;switch(target.id){case"id11":line1.className="effect0";pic.className="effect0";break;case"id21":line1.className="effect";pic.className="effect";break;case"id31":line1.className="effect2";pic.className="effect2";break;case"id41":line1.className="effect3";pic.className="effect3";break;case"id51":line1.className="effect4";pic.className="effect4";break;}}pic.addEventListener("click",showbig,false);functionshowbig(){pic.className="piceffect";}

效果图：

当鼠标没有点击标签时，横线默认是在第一个标签下，如图：

当点击任何一个标签，下划线和图片就会平滑的过度到点击的那个标签下，如图：