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 ...

随机推荐

ASP.NET Core 2.0 使用支付宝PC网站支付实现代码（转）
最近在使用ASP.NET Core来进行开发,刚好有个接入支付宝支付的需求,百度了一下没找到相关的资料,看了官方的SDK以及Demo都还是.NET Framework的,所以就先根据官方SDK的源码, ...
bzoj 4556 [Tjoi2016&Heoi2016]字符串——后缀数组+主席树
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4556 本来只要查 ht[ ] 数组上的前驱和后继就行,但有长度的限制.可以二分答案解决!然后 ...
HttpPostedFile类
在研究HttpRequest的时候,搞文件上传的时候,经常碰到返回HttpPostedFile对象的情况,这个对象才是真正包含文件内容的东西. 经常要获取的最重要的内容是FileName属性与Sava ...
打开Visual Studio 2012的解决方案连接 Dynamics CRM 2011 的Connect to Dynamics CRM Server 在其工具下没有显示
一.使用TFS 代码管理,发现Visual Studio 2012 菜单栏工具下的Connect to Dynamics CRM Server 没有显示. 平常打开VS下的工具都会出现Connect ...
【python】实例-判断用户输入数字的类型
num=input("please input the num: ") print "the number your input is: "+str(num) ...
AIX6.1 线程模型说明
引文:线程模型(Threading Model)默认从进程域 (M:N 模型 ) 改为系统全局域 (1:1 模型 ) 在 AIX 5L 中,pthread 线程的默认模型是 m:n 方式,而从 AIX ...
js引用类型之valueof和tostring（三）
一.摘要: <javascript高级程序设计第三版>一书中单独有一章对js的引用类型(Object.Array.RegExp.Function:基本包装类型:Boolean.Number ...
maven学习（2）-在Eclipse 中使用Maven
第一节:m2eclipse 插件安装打开Eclipse,点击菜单Help - > Install New Software 点击Add 按钮Name:m2e location: http:// ...
python接口自动化20-requests获取响应时间(elapsed)与超时（timeout）
前言 requests发请求时,接口的响应时间,也是我们需要关注的一个点,如果响应时间太长,也是不合理的. 如果服务端没及时响应,也不能一直等着,可以设置一个timeout超时的时间关于reques ...
廖雪峰Java1-2程序基础-7布尔运算符
布尔运算符关系运算符:>, >=, <, <=, ==,!= 与运算 && 或运算 | 非运算 ! int n = 5; boolean t = n > ...

JQUERY伸缩导航

JQUERY伸缩导航的更多相关文章

随机推荐

热门专题