首先要具备js的基本知识:id、className、Tagname、name的获取和循环。
在点击图标中引用了font-Size;从图标库中获取代码。http://www.iconfont.cn/plus
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0px; margin: 0px; } header{ position: relative; width: 100%; height: 388px; background: #D75900; } header div{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: 0 auto; width: 1005px; height: 328px; opacity: 0; } .newDiv{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: 0 auto; width: 1005px; height: 328px; opacity: 1; } @font-face {font-family: "iconfont"; src: url('font/iconfont.eot'); /* IE9*/ src: url('font/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome, firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } .changeDiv{ position: absolute; top: 328px; left: 0px; width: 1005px; height:80px; /*border: 1px red solid;*/ margin-left: 190px; } .changeDiv div { text-align: center; line-height: 60px; width: 196px; height: 60px; float: left; font-family:"iconfont" !important; font-size:30px; font-style:normal; color: #CE3700; margin-left: 2px; background: rgba(255,255,255,.3); -webkit-transition: margin-top .05s linear; cursor: pointer; } .textDiv { text-align: center; line-height: 60px; width: 196px; float: left; font-family:"iconfont" !important; font-size:30px; font-style:normal; color: #CE3700; margin-left: 2px; background: rgba(255,255,255,.3); height: 60px; padding-top: 8px; margin-top: -8px; cursor: pointer; } </style> </head> <body> <header> <!-- 5张轮播图--> <div class="first newDiv"> <img src="images/index1.png"> </div> <div> <img src="images/index2.png"> </div> <div> <img src="images/index3.png"> </div> <div> <img src="images/index4.png"> </div> <div> <img src="images/index5.png"> </div> </header> <!--从iconfont中获取的以字体形式的图片,可以图片可以像字体一样任性修改--> <div class="changeDiv"> <div class="textDiv" οnclick="changeAppear(this,0)"></div> <div οnclick="changeAppear(this,1)"></div> <div οnclick="changeAppear(this,2)"></div> <div οnclick="changeAppear(this,3)"></div> <div οnclick="changeAppear(this,4)"></div> </div> <script> /** * @desc 导航栏与副导航栏之间的切换 * @param obj * @param n */ function changeAppear(obj,n){ var prarent=obj.parentNode; var textDiv= prarent.getElementsByTagName("div"); // console.log(textDiv); for(var i=0;i<textDiv.length;i++){ textDiv[i].className=""; } obj.className="textDiv"; var header=document.getElementsByTagName("header"); var imgDiv=header[0].getElementsByTagName("div"); console.log(header); console.log(imgDiv); for(var j=0 ;j<imgDiv.length;j++){ imgDiv[j].className=""; } imgDiv[n].className="first newDiv"; } </script> </body> </html>效果展示: