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

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

94 95

关注微信号：javalearns 随时随地学Java

或扫一扫

随时随地学Java

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

java写一个登录系统_用java写一个用户登陆界面
一.课堂测试源代码及其结果截图用java的swing写一个用户登录界面,采用网格布局.源代码如下: /** * */ package LiuLijia; import java.awt.CardLa ...
android 如何修改百度导航诱导界面,Android 百度导航SDK
1)AndroidManifest.xml 增加权限,声明service和ak鉴权 android:allowBackup="true" android:icon="@m ...
IOS界面元素四栏（状态栏、导航栏、工具栏、TAB栏）设计规范
1 栏 1.1 状态栏状态栏展示于设备和当前环境相关的重要信息. 外观和行为:状态栏总是出现在屏幕顶部,包含网络连接.时间.电量等用户需要的信息在iPhone上,状态栏的颜色会变.而 ...
Android仿人人客户端（v5.7.1）——应用主界面之左侧面板UI实现
转载请标明出处:http://blog.csdn.net/android_ls/article/details/8749188 声明:仿人人项目,所用所有图片资源都来源于其它Android移动应用,编 ...
[置顶] Android仿人人客户端（v5.7.1）——应用主界面之左侧面板UI实现
转载请标明出处:http://blog.csdn.net/android_ls/article/details/8749188 声明:仿人人项目,所用所有图片资源都来源于其它Android移动应用, ...
安卓项目实践——仿淘宝界面(二)——底部导航栏技术（Fragment实现）
安卓项目实践--仿淘宝界面(一)--底部导航栏技术(Fragment实现) 1.实现效果展示 2.技术简述该导航栏主要使用Fragment技术实现,关于Fragment的介绍大家可以自行百度,导航栏 ...
js实现网页左侧导航条,鼠标经过显示隐藏的面板
js实现网页左侧导航条,鼠标经过显示隐藏的面板 <style>* {margin: 0;padding: 0;}#left_nav {position: relative;border: ...
浮动导航栏php源码,JQuery 浮动导航栏实现代码
JQuery 浮动导航栏 /* 浮动导航栏 Begin */ #floatMenu { padding-top: 5px; background: url(http://img.jb51.net/im ...
java qq聊天界面_【附源码】用Java写了一个类QQ界面聊天小项目，可在线聊天！...
原标题:[附源码]用Java写了一个类QQ界面聊天小项目,可在线聊天! 目录: 1.功能实现 2.模块划分 3.使用到知识 4.部分代码实现 5.运行例图 1.功能实现 1.修改功能(密码.昵称.个性 ...

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

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

最新文章

热门文章