淡入淡出(折叠效果)and点击切换背景图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>left</title>
<!--jquery.js需要自己下载哦-->
<script language="JavaScript" src="js/jquery.js"></script>
<script type="text/jscript">
// //顶部导航切换
$(document).ready(function(){
$('.menus li a').click(function(){
$('.menus li a').removeClass('active')
$(this).addClass('active')
});
// //折叠效果
$('.title').click(function(){
var $ul=$(this).next('ul');
$('.left_menu').find('ul').slideUp();
if($ul.is(':visible')){
$(this).next('ul').slideUp();
}else{
$(this).next('ul').slideDown()
}
});
})
</script>
<style>
#body{ background:#f0f9fd repeat; margin:0; padding:0;}
.left_top{ background:url(images/lefttop.gif) center repeat-x;height:40px; color:#FFF; line-height:40px;}
.left_top span{margin-left:8px; margin-top:10px;margin-right:8px; background:url(images/leftico.png) no-repeat; width:20px; height:21px;float:left;}
.left_menu{ width:185px; height:auto; border-right:#999 1px solid; }
.title{height:30px;width:185px; line-height:30px; font-size:12px; font-weight:bold; background:#d4e6f0 center repeat-x; border-bottom:#999 1px solid;}
.title img{padding-left:20px; padding-right:5px; }
.menus{margin-top:0px; height:auto; display:none;}
.menus li{font-size:12px; list-style:none; height:30px;}
.active{ background:url(images/libg.png) center repeat-x; height:30px; }
.menus li a{text-decoration:none; color:#000; height:30px; display:block; line-height:30px;}
</style>
</head>
<body id="body">
<div class="left_top"><span></span>通讯录</div>
<div class="left_menu">
<div class="title">
<span><img src="data:images/leftico01.png" /></span>管理信息
</div>
<!--想让哪个菜单默认是显示的只需将display:none;改为display:block;即可-->
<ul class="menus" style="display:block;">
<li><a href="#" >首页模版</a></li>
<li><a href="#" class="active">数据列表</a></li>
<li><a href="#">图片数据表</a></li>
</ul>
<div class="title">
<span><img src="data:images/leftico01.png" /></span>其他设置
</div>
<ul class="menus">
<li><a href="#">编辑内容</a></li>
<li><a href="#">发布信息</a></li>
</ul>
</div>
</body>
</html>
淡入淡出(折叠效果)and点击切换背景图片的更多相关文章
- 练习：javascript淡入淡出半透明效果
划过无透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览 源码下载 实现的代码. html代码: <a ...
- 利用CSS3制作淡入淡出动画效果
CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...
- js+jq 淡入淡出轮播（点击+定时+鼠标进入移出事件）
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- jquery——左右按钮点击切换一组图片功能
一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...
- 一个简单且丑陋的js切换背景图片基础示例
不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...
- WPF 渐隐渐现切换背景图片
最近学习WPF,尝试着自己做一些小玩意,也遇到了一些问题,于是整理记录以便日后查阅. 我们都知道WPF可以实现一些很炫的效果,然而有时候为达到这个目的却并不是一件很容易的事情.比如:在软件中我希望能够 ...
- 网页html随机切换背景图片
首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量. 在script中将这些图像编为一个数组,便于调用.数组的长 ...
- android小功能：checkbox使用自己的背景点击切换背景
xiazai_checkbox.xml <?xml version="1.0" encoding="utf-8"?> <selector xm ...
随机推荐
- Android中的安全与访问权限控制
Android是一个多进程系统,在这个系统中,应用程序(或者系统的部分)会在自己的进程中运行.系统和应用之间的安全性是通过Linux的facilities(工具,功能)在进程级别来强制实现的,比如会给 ...
- iOS - keychain 详解及变化
keychain介绍 iOS keychain 是一个相对独立的空间,保存到keychain钥匙串中的信息不会因为卸载/重装app而丢失, .相对于NSUserDefaults.plist文件保存等一 ...
- MegaCli 使用
安装: wget ftp://rpmfind.net/linux/Mandriva/devel/cooker/x86_64/media/non-free/release/megacli-8.02.21 ...
- shell 获取脚本的绝对路径
basepath=$(cd `dirname $0`; pwd) 在此解释下basepath : dirname $0,取得当前执行的脚本文件的父目录 cd `dirname $0`,进入这个目录(切 ...
- WEB服务器控件对应生成的HTML标签 及最常应用事例
首先得了解WEB服务器控件对应生成的HTML标签 label----------<span/>button---------<input type="submit" ...
- css修改select默认样式
先来看看效果图: css: <style media="screen"> .select_demo, .select_list { width: 400px; heig ...
- mysql explain分析
通过explain可以知道mysql是如何处理语句,分析出查询或是表结构的性能瓶颈.通过expalin可以得到: 1. 表的读取顺序 2.表的读取操作的操作类型 3.哪些索引可以使用 4. 哪些索引被 ...
- hdu 4746Mophues[莫比乌斯反演]
Mophues Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 327670/327670 K (Java/Others) Total ...
- gradle项目,连同依赖一起打jar包
在build里加入以下配置(如果不是一个可执行的jar包的话就不用配置Main-Class属性): def mainClassName = "你需要执行的main方法所在的的包名+类名&qu ...
- Rails: could not connect to database postgres: FATAL: Peer authentication failed for user "username"
/var/lib/pgsql/9.2/data/pg_hba.conf 打开之后找到 local all postgres/all peer 改成 local all postgres trust 保 ...