JQUERY伸缩导航
<!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=gb2312" />
<link type="text/css" href="http://blog.163.com/tstone_wj/blog/base.css" rel="stylesheet" />
<script type="text/javascript" src="http://blog.163.com/tstone_wj/blog/jquery.js"></script>
<title>我的空间</title>
<style type="text/css">
.attention{ width:315px; float:left; margin-left:10px; display:inline;}
.attention h3{width:303px; float:left; height:20px; border-top:#ebebeb 1px solid; font-size:12px; padding-top:5px; padding-left:7px; color:#666666; position:relative; cursor:pointer;}
.attention h3 span{ position:absolute; top:5px; right:7px; cursor:pointer;}
.aaa{ background:url(jiantou_xia.jpg) no-repeat; width:15px; height:11px;}
.ccc{ background:url(jiantou_shang.jpg) no-repeat; width:15px; height:16px;}
.attention ul{ float:left; width:310px; border:#0F0 1px solid;}
.attention li{ float:left; width:48px; height:48px; display:block; margin-left:8px;}
.none{ display:none;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$(".tttt2").click(function(){
$(".tttt2").find("#aaa").css("background","#f7f7f7");
$(".tttt1").find("#aaa").css("background","#ffffff");
$(".tttt2").find("#fff").addClass("ccc");
$(".tttt2").find("#fff").removeClass("aaa");
$(".tttt1").find("#fff").addClass("aaa");
$(".tttt1").find("#fff").removeClass("ccc");
$(".tttt2").find("ul").removeClass("none");
$(".tttt1").find("ul").addClass("none");
$(".tttt1").find("ul").slideUp();
$(".tttt2").find("ul").slideDown();
});
$(".tttt1").click(function(){
$("#aaa").css("background","#f7f7f7");
$(".tttt2").find("#aaa").css("background","#ffffff");
$("#fff").addClass("ccc");
$("#fff").removeClass("aaa");
$(".tttt2").find("#fff").addClass("aaa");
$(".tttt2").find("#fff").removeClass("ccc");
$(".tttt2").find("ul").addClass("none");
$(".tttt1").find("ul").removeClass("none");
$(".tttt1").find("ul").slideDown();
$(".tttt2").find("ul").slideUp();
})
});
</script>
<div class="attention">
<div class="tttt1">
<h3 id="aaa">关注32<span class="aaa" id="fff" ></span></h3>
<ul>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic3.jpg" width="49" height="47" /></a></li>
</ul>
</div>
<div class="tttt2">
<h3 style=" margin-top:10px;" id="aaa">粉丝66<span class="aaa" id="fff"></span></h3>
<ul class="none">
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
JQUERY伸缩导航的更多相关文章
- jQuery Mobile 导航栏
jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...
- jQuery弹性滑动导航菜单实现思路及代码
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...
- jQuery 顶部导航尾随滚动，固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
- 30个实用的jQuery选项卡/导航教程推荐
很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...
- jQuery实现导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 简单的jquery左侧导航栏和页面选中
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...
- 10款最新CSS3/jQuery菜单导航插件
这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...
- 分享21个基于jquery菜单导航的效果
jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...
- css+js实现自动伸缩导航栏
用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...
随机推荐
- hihocoder 1513 小Hi的烦恼——bitset
题目:http://hihocoder.com/problemset/problem/1513 自带的题解写得很好…… #include<cstdio> #include<cstri ...
- ORA-01919: role 'OLAPI_TRACE_USER' does not exist
我在用数据泵导入数据的时候报的错 TEST_USER1@ORCL> conn / as sysdbaSYS@ORCL> grant plustrace to TEST_USER1; gra ...
- OpenWrt的web服务器
参考: http://www.szchehang.com/news/10602.html 我们登录的路由器主界面就是通过这个软件指定了80端口来访问的.我们要添加自己额外的网站服务,那只需要重新定义一 ...
- ML(2): 术语及算法分类汇总
机器学习术语 归纳总结机器学习相关的基本术语,以一批西瓜的数据为例,例如:(色泽=青绿:根蒂=蜷缩:敲声=浊响),(色泽=乌黑:根蒂=稍蜷:敲声=沉闷),(色泽=浅白:根蒂=硬挺:敲声=清脆)... ...
- java 关于Java中静态代码块以及构造函数的执行先后顺序
先转个链接 http://blog.csdn.net/wangbaokangfei/article/details/7757320 另外补充一下.静态方法,只执行一次就自动在内存中存在,再次实例化此 ...
- bzoj2048 书堆
Description Input 第一行正整数 N M Output 一行(有换行符),L,表示水平延伸最远的整数距离 (不大于答案的最大整数) 贪心地把最高的书尽量向右放可以得到最优解,因而最高的 ...
- DIV+CSS如何让文字垂直居中?（转）
此篇文章转自网络,但是我忘了原文地址,如果有人知道,麻烦告知一声~ 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少 ...
- 关于模板该不该用css强制编辑器文本开头空两格
关于模板该不该用css强制编辑器文本开头空两格这个问题,我很早之前就想说了,写惯了qq日志的童鞋都知道,qq空间的编辑器没有任何css控制,行头空两格是由用户自己控制,我写起日志又像流水账,长长的一篇 ...
- Windows7无法访问共享文件夹(0x800704cf，0x80070035)解决方法
Windows7系统突然无法访问Linux的samba服务器,出现0x800704cf或者0x80070035错误,也不能访问其他windows机器的共享文件夹,解决方案如下两张图,配置与下面两张图为 ...
- ajax异步、同步问题，KindEditor ajax提交内容，ajax提交form表单 解决按两次的问题
版权声明:本文为博主原创文章,未经博主允许不得转载. 如果ajax不采用异步,整个js代码在服务器返回结果前都将阻塞,alert方法除外 lookUp('lookUp','',100,300,3); ...