java写左侧导航栏界面,jQuery----左侧导航栏面板切换实现

页面运行结果：

                     

                

               

点击曹操　　　　　　　　　点击刘备　　　　　　　　点击孙权　　　　　　　　原图

需求说明：原图如上所示，点击一方诸侯的时候，显示该诸侯手下猛将，其他诸侯手下猛将隐藏

页面结构：

实现思路：

①给大的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