zoukankan      html  css  js  c++  java
  • 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{ 315px; float:left; margin-left:10px; display:inline;}
    .attention h3{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; 15px; height:11px;}
    .ccc{ background:url(jiantou_shang.jpg) no-repeat; 15px; height:16px;}
    .attention ul{ float:left; 310px; border:#0F0 1px solid;}
    .attention li{ float:left; 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>

  • 相关阅读:
    Vue路由和组件分别在什么场景使用
    mybatis返回集合对象包含List<String>
    vue登录页+验证码+MD5加密
    mybatis 查询树形结构
    解决Vue Router报错 Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext
    HttpServletRequest 在Filter中添加header
    CRM体系中的SFA(SaleForce Automation)应该怎么设计?
    Google Analytics Advertisement 广告 URL : 数据产品知识 UTM
    Win11要的TPM 2.0不一定是独立芯片,你的CPU固件可能已经支持 || 杨澜对话尹志尧:美国顶尖半导体专家华人很多,国内却奇缺
    mysql SQL注入攻击 解决Orm工具Hibernate,Mybatis, MiniDao 的 sql 预编译语句 ;解决非Orm工具JDBCTemplate的
  • 原文地址:https://www.cnblogs.com/zengda/p/4299812.html
Copyright © 2011-2022 走看看