jquery好友面板切换
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style>
#u1 li{
margin-bottom:10px;
background-color:orange;
font-size:20px;
font-weight:bolder;
cursor:pointer;
}
#u1 li ul{
list-style-type:none;
margin:0;
padding:0;
}
#u1 li ul li{
background-color:pink;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('#u1 li ul li').hide();
$('#u1 li').click(function () {
$('ul li', $(this)).show(500);
$('ul li', $(this).siblings('li')).hide(500);
});
});
</script>
</head>
<body>
<div style="width:200px;height:500px;border:1px solid red">
<ul id="u1" style="list-style-type:none; margin:0; padding:0; text-align:center;">
<li>
幼儿园同学
<ul>
<li>鼻涕虫</li>
<li>爱哭鬼</li>
<li>张大胆</li>
</ul>
</li>
<li>
小学同学
<ul>
<li>张三丰</li>
<li>张无忌</li>
<li>乔布斯</li>
</ul>
</li>
<li>
初中同学
<ul>
<li>盖茨</li>
<li>种哥</li>
<li>奥巴马</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
jquery好友面板切换的更多相关文章
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- jquery背景自动切换特效
查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...
- 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...
- 一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
- 一款基于jQuery多图切换焦点图插件
这次要给大家分享的也是一款jQuery图片滑块插件,之前有介绍过不少实用的jQuery焦点图插件和jQuery图片滑块插件,比如jQuery左侧Tab切换的图片滑块插件.它的特点是可以同时切换多张图片 ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- jquery实现图片切换和js实现图片切换
jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
随机推荐
- catalina.out 和 catalina.log 的区别和用途
catalina.out catalina.out其实是tomcat的标准输出(stdout)和标准出错(stderr),这是在tomcat的启动脚本里指定的,如果没有修改的话stdout和stder ...
- eclipse 远程debug tomcat web项目
1.首先须要在linux系统tomcat/bin文件夹下配置catalina.sh这个文件里添加: CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=d ...
- js进阶正则表达式15验证身份证号（|符号的使用：var reg=/^\d{17}[\d|X]$|^\d{15}$/）（str的方法substr）
js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...
- Android自定义组件系列【1】——自定义View及ViewGroup
View类是ViewGroup的父类,ViewGroup具有View的所有特性,ViewGroup主要用来充当View的容器,将其中的View作为自己孩子,并对其进行管理,当然孩子也可以是ViewGr ...
- 辛星浅析yaf框架中的类的自己主动载入问题
因为公司非常多项目都是基于yaf的,而非常多刚接触yaf的朋友问的第一个问题就是:yaf的自己主动载入是依照什么规则来的. 鉴于此.于是我特别开了一篇博文来记录一下. 首先在yaf中.models文件 ...
- Android 用SSL构建安全的Socket
SSL(安全套接层)是 Netscape公司在1994年开发的,最初用于WEB浏览器,为浏览器与服务器间的数据传递提供安全保障,提供了加密.来源认证和数据完整性的功能.现在SSL3.0得到了普遍的使用 ...
- 微信小程序从零开始开发步骤（一）
从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了.1:注册用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,点击 ht ...
- Python将被加入高考科目？你怎么看？
今天看到这样的一则新闻:不禁感叹,人工智能这股风来的太快,已经掀起全民学习Python的浪潮. 2017年中观察:看上去这个大纲内容基本是这样了,但是实行年份可能要往后推了,不在2017年执行了(据说 ...
- JSP的C标签遍历Map数据
JSP的C标签遍历Map数据 Map可以实现较为丰富的数据封装. 第一种: 控制器传递到页面的map格式如下: Map<String, User> dataMap = new HashMa ...
- 51nod1673 树有几多愁 - 贪心策略 + 虚树 + 状压dp
传送门 题目大意: 给一颗重新编号,叶子节点的值定义为他到根节点编号的最小值,求所有叶子节点值的乘积的最大值. 题目分析: 为什么我觉得这道题最难的是贪心啊..首先要想到 在一条链上,深度大的编号要小 ...