html实现左侧导航切换,jQuery----左侧导航栏面板切换实现

页面运行结果:@H_404_1@

311a498a63075c6563ac174d3981fc47.png404_1@

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

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

页面结构:@H_404_1@

888f5aae1c47cc84710a6e808c0c22a1.png404_1@@H_404_1@

实现思路:@H_404_1@

①给大的li注册鼠标点击事件@H_404_1@

当鼠标点击时候,获取当前li的ul下的所有的li,调用元素的show()方法。注意,该方法中可以加参数(数组),控制元素显示的快慢 $(this).children( "ul" ).find( "li" ).show(500);@H_404_1@

获取当前li的所有的兄弟li:$(this).siblings( "li" );@H_404_1@

获取兄弟li下的ul:$(this).siblings( "li" ).children( "ul" );@H_404_1@

获取兄弟li下ul中的所有的li;$(this).siblings( "li" ).children( "ul" ).find( "li" );@H_404_1@

设置上述其他的li隐藏:$(this).siblings( "li" ).children( "ul" ).find( "li" ).hide(500);@H_404_1@

代码如下:@H_404_1@

导航栏项目切换

Box">

张辽

张郃

夏侯惇

夏侯渊

许褚

典韦

曹仁

曹洪

徐晃

关羽

张飞

赵云

马超

黄忠

魏延

甘宁

太史慈

程普

周瑜

韩当

周泰

蒋钦

祖茂

黄盖

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!