頁面運行結果：

? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ?

點擊曹操　　　　　　　　　點擊劉備　　　　　　　　點擊孫權　　　　　　　　原圖

需求說明：原圖如上所示，點擊一方諸侯的時候，顯示該諸侯手下猛將，其他諸侯手下猛將隱藏

頁面結構：

實現思路：

①給大的li注冊鼠標點擊事件

當鼠標點擊時候，獲取當前li的ul下的所有的li，調用元素的show()方法。注意，該方法中可以加參數(數組)，控制元素顯示的快慢? $(this).children( "ul" ).find( "li" ).show(500);

獲取當前li的所有的兄弟li：$(this).siblings( "li" )；

獲取兄弟li下的ul：$(this).siblings( "li" ).children( "ul" )；

獲取兄弟li下ul中的所有的li；$(this).siblings( "li" ).children( "ul" ).find( "li" )；

設置上述其他的li隱藏：$(this).siblings( "li" ).children( "ul" ).find( "li" ).hide(500)；

代碼如下：

1 2 3

4 5 導航欄項目切換 6 7 38 39 40 50 51 52 53

• 54
• 曹操55
  • 56
  • 張遼 57
  • 張郃 58
  • 夏侯惇 59
  • 夏侯淵 60
  • 許褚 61
  • 典韋 62
  • 曹仁 63
  • 曹洪 64
  • 徐晃 65
  66 67 68
• 劉備69
  • 70
  • 關羽 71
  • 張飛 72
  • 趙云 73
  • 馬超 74
  • 黃忠 75
  • 魏延 76
  77 78 79
• 孫權80
  • 81
  • 甘寧 82
  • 太史慈 83
  • 程普 84
  • 周瑜 85
  • 韓當 86
  • 周泰 87
  • 蔣欽 88
  • 祖茂 89
  • 黃蓋 90
  91 92

93 94 95

關注微信號：javalearns?? 隨時隨地學Java

或掃一掃

隨時隨地學Java

總結

以上是生活随笔為你收集整理的java写左侧导航栏界面,jQuery----左侧导航栏面板切换实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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