當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js实现导航页面

發布時間：2025/6/15 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 js实现导航页面小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

效果圖：

代碼：

<!DOCTYPE?html> <html> <head><meta?charset="UTF-8"><meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?minimum-scale=1.0,?maximum-scale=1.0,?user-scalable=no"/><meta?name="apple-mobile-web-app-capable"?content="yes"/><meta?name="apple-mobile-web-app-status-bar-style"?content="black"/><meta?name="format-detection"?content="telephone=no"><title>管理頁面nav導航</title><style>*{margin:?0;padding:?0;}.wrapper{position:?relative;overflow:?hidden;width:200px;border:1px?solid?#ccc;margin:10px;padding:10px;box-shadow:?0?0?6px?#333;}li{list-style:?none;background:?pink;line-height:24px;margin:10px?auto;cursor:pointer;}p{background:?green;padding-left:?2em;cursor:pointer;}li?p{display:?none;}.open{color:blue;}</style> </head> <body><div?id="nav"?class="wrapper"><ul><li><img?src="images/acorn.ico"?alt=""?class="icon-img">第一個導航列表<p>-?Hello?World</p><p>-?Good?Morning</p></li><li><img?src="images/acorn.ico"?alt=""?class="icon-img">第二個導航列表<p>-?First</p><p>-?Second</p><p>-?Third</p></li><li><img?src="images/acorn.ico"?alt=""?class="icon-img">第三個導航列表<p>-?Finished</p></li><li><img?src="images/acorn.ico"?alt=""?class="icon-img">第四個導航列表<p>-?Hello?World</p><p>-?Good?Morning</p></li><li><img?src="images/acorn.ico"?alt=""?class="icon-img">第五個導航列表<p>-?First</p><p>-?Second</p><p>-?Third</p></li><li><img?src="images/acorn.ico"?alt=""?class="icon-img">第六個導航列表<p>-?Finished</p></li></ul></div><script?src="jquery-2.1.4.min.js"></script><script>var?liList?=?$("#nav?li")?;for(var?i=0,max=liList.length;i<max;i++){$(liList[i]).attr("data-index",i)?;}liList.click(function(){var?self?=?this;for(var?i=0,max=liList.length;i<max;i++){if(i?==?$(self).data("index")){if($(self).hasClass("open")){$(self).removeClass("open")?;$(self).find("p").hide();$(self).find(".icon-img").css({"transform":"rotate(0)","transition":"all?0.5s"});}else{$(self).addClass("open")?;$(self).find("p").show();$(self).find(".icon-img").css({"transform":"rotate(180deg)","transition":"all?0.5s"});}}else{if($(liList[i]).hasClass("open")){$(liList[i]).removeClass("open")?;$(liList[i]).find("p").hide();$(liList[i]).find(".icon-img").css({"transform":"rotate(0)","transition":"all?0.5s"});}}}});</script> </body> </html>

轉載于:https://my.oschina.net/zyxchuxin/blog/542297

總結

以上是生活随笔為你收集整理的js实现导航页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

页面
js