导航菜单点击图片切换--jquery
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .hide{display: none;} /***左侧菜单栏***/ .left-nav{ position: absolute; top: 0; left: 0; z-index: 99; width: 86px; height:100%; background-color: #333; } .left-nav .item{ width: 100%; height: 104px; padding: 20px 0 12px; } .left-nav .item:hover{ background-color: #42515f; } .left-nav .item a{ display: inline-block; width: 100%; height: 72px; text-align: center; } /***右侧主体内容***/ .right-main{ width: 100%; height:100%; padding-left: 86px; } .mainContent{ width: 100%; height: 100%; padding: 20px; } </style> </head> <body> <div class="left-nav "> <div class="item"> <a href="javascript:;"><img src="img/ch0.png" alt=""/></a> </div> <div class="item"> <a href="javascript:;"><img src="img/ch1.png" alt=""/></a> </div> <div class="item"> <a href="javascript:;"><img src="img/ch2.png" alt=""/></a> </div> <div class="item"> <a href="javascript:;"><img src="img/ch3.png" alt=""/></a> </div> <div class="item"> <a href="javascript:;"><img src="img/ch4.png" alt=""/></a> </div> <div class="item"> <a href="javascript:;"><img src="img/ch5.png" alt=""/></a> </div> </div> <div class="right-main "> <div class="mainContent "> 1 </div> <div class="mainContent hide"> 2 </div> <div class="mainContent hide"> 3 </div> <div class="mainContent hide"> 4 </div> <div class="mainContent hide"> 5 </div> <div class="mainContent hide"> 6 </div> </div> <script src="js/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //左侧内容切换 $(".left-nav .item").click(function () { var index = $(".left-nav .item").index(this); var $Img = $(".left-nav img"); var imgTxt = "<img src='img/left" + index + ".png' alt='' />"; $(this).css("background", "#fff").siblings().css("background", "#333"); $(".mainContent").eq(index).removeClass("hide").show().siblings().hide(); $Img.eq(index).replaceWith(imgTxt); $(this).siblings().each(function () { var $Imgs = $(this).find("img"); var Ind = $(".left-nav .item").index(this); $Imgs.attr("src", "img/ch" + Ind + ".png"); }); }); </script> </body> </html>
结构图:
效果图: