<!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伸缩导航的更多相关文章

  1. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  2. jQuery弹性滑动导航菜单实现思路及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...

  3. jQuery 顶部导航尾随滚动,固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  4. 30个实用的jQuery选项卡/导航教程推荐

    很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...

  5. jQuery实现导航栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  7. 10款最新CSS3/jQuery菜单导航插件

    这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...

  8. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  9. css+js实现自动伸缩导航栏

    用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...

随机推荐

  1. 洛谷2530(codevs2098)化工厂装箱员

    题目:https://www.luogu.org/problemnew/show/P2530 dp或搜索. dp做法就是 当前值+1 转移到 当前某一维为0.位置前进了c位 的地方.但没写. 写了搜索 ...

  2. jmeter测试TCP服务器/模拟发送TCP请求

    jmeter测试TCP服务器,使用TCP采样器模拟发送TCP请求. TCP采样器:打开一个到指定服务器的TCP / IP连接,然后发送指定文本并等待响应. jmeter模拟发送TCP请求的方法: 1. ...

  3. 小峰mybatis(5)mybatis使用注解配置sql映射器--动态sql

    一.使用注解配置映射器 动态sql: 用的并不是很多,了解下: Student.java 实体bean: package com.cy.model; public class Student{ pri ...

  4. Mac部分软件安装教程

    1.安装Office Office破解版安装教程:https://www.jianshu.com/p/f45894b67ec7 2.安装破解版ps 1.安装ps,最后开始试用 2.解压缩Adobe z ...

  5. ssh的应用和vnc连接桌面

    什么是ssh? SSH是一种网络协议,用于计算机之间的加密登录.如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码也不会泄露.SSH之 ...

  6. (转)android系统开发 AP 和 BP 简要说明

    手机的AP和BP根据上下文可以指代硬件和软件两种意思.  1) 大多数的手机都含有两个处理器.操作系统.用户界面和应用程序都在Application Processor(AP)上执行,AP一般采用AR ...

  7. jQuery的get()用法

    这个方法主要是将jQuery对象或者jQuery对象集合转换成DOM对象或dom对象集合. get()方法中如果传递参数,表示将具体位置的jQuery对象转换成dom对象.如果没有参数,则表示返回所有 ...

  8. BI开发(ETL-DW)

    来到公司已经参与开发了一段时间的BI项目,但是仅仅是按照需求开发,今天下午公司给大家培训数据仓库的知识,老大(女程序员)在上面讲,我们在下面听,2到3个小时吧,什么纬度,主题,几乎听的一脸茫然,最后演 ...

  9. Python中的LEGB规则

    目标 命名空间和作用域——Python从哪里查找变量名? 我们能否同时定义或使用多个对象的变量名? Python查找变量名时是按照什么顺序搜索不同的命名空间? 命名空间与作用域的介绍 命名空间 大约来 ...

  10. ORACLE中CONNECT BY...START WITH...的使用

    源: https://docs.oracle.com/cd/B19306_01/server.102/b14200/queries003.htm http://www.cnblogs.com/baiy ...