<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { list-style: none; box-sizing: border-box; } a { text-decoration: none; } ul li { float: left; } #t1,#t2,#t3 { clear: both; width: 300px; height: 300px; border:1px solid purple; } .active { background-color: #0088cc; } .hehe { display: none; } .hihi { display: block; } #t1 { background-color: red; /*display: block;*/ } #t2 { background-color: blue; } #t3 { background-color: yellow; } </style> </head> <body> <ul> <li><a href="javascript:;" target="t1">第一個</a></li> <li><a href="javascript:;" target="t2">第二個</a></li> <li><a href="javascript:;" target="t3">第三個</a></li> </ul> <div id="t1" class="hehe hihi"> </div> <div id="t2" class="hehe"> </div> <div id="t3" class="hehe"> </div> <script src="assets/global/plugins/jquery.min.js" ></script> <script> $(function(){ $("ul>li").click(function(){ $("ul>li").removeClass("active"); $(this).addClass("active"); var src=event.target;//get a var href=$(src).attr("target");//get t var dd="#"+href; //get id console.log(dd); $('div').removeClass("hihi"); $("div").addClass("hehe"); $(dd).removeClass("hehe"); }); }); </script> </body> </html>
js實現簡單導航切換
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章