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 ...
随机推荐
- 【u020】Couple number
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 任何一个整数N都能表示成另外两个整数a和b的平方差吗?如果能,那么这个数N就叫做Couple numb ...
- [React] Modify file structure
In React app, you might create lots of components. We can use index.js to do both 'import' & 'ex ...
- 忙里偷闲( ˇˍˇ )闲里偷学【C语言篇】——（4）for == while ?
一.for和while等价替换 int i = 1; for (i; i<=100; i++){ sum = sum + 1; } int i = 1; while(i<=100){ su ...
- 基于GTID多源复制扩展
对一个运行很久的库做备份恢复建同步 不能使用xtrabackup 使用mysqldump导数据: mysqldump -S /data/mysql/3307/tmp/3307.sock --sin ...
- Spark修炼之道（基础篇）——Linux大数据开发基础：第三节：用户和组
本节主要内容 理解用户和组的概念 用户管理 组管理 权限分配 1. 理解用户和组的概念 在第一讲中我们提到.linux是一种多任务.多用户的操作系统,在讲ls -l命令行我们看到例如以下文件具体信息: ...
- AsyncTask下载图片
最近在看一个非常早期曾经写过代码,装上去召回.本文首先召回AsyncTask的基本使用. AsyncTask说简单点就是 开启一个线程.而且把结果提交给ui线程. Thread+Handler,只 ...
- 【codeforces 789C】Functions again
[题目链接]:http://codeforces.com/contest/789/problem/C [题意] 看式子. [题解] 考虑最后的答案区间; 如果那个区间是从奇数位置的数字开始的; 那么奇 ...
- hadoop 3.x 配置历史服务器
修改$HADOOP_HOME/etc/hadoop/mapred-site.xml,加入以下配置(修改主机名为你自己的主机或IP,尽量不要使用中文注释) <!--history address- ...
- Winform中GridView分组排序实现功能
由于客户最近要扩充公司的业务,之前基于Winform+web开发混合式的系统已经不能满足他们的需求,需要从新对系统进行分区处理. 考虑到系统模块里面用到的GridView视图比较多,我就结合了DevE ...
- WPF 插拔触摸设备触摸失效
原文:WPF 插拔触摸设备触摸失效 最近使用 WPF 程序,在不停插拔触摸设备会让 WPF 程序触摸失效.通过分析 WPF 源代码可以找到 WPF 触摸失效的原因. 在 Windows 会将所有的 H ...