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>

  • 相关阅读:
    linux命令学习
    linux sar命令详解
    消息中间件设计
    google三驾马车
    Apache ZooKeeper 服务启动源码解释
    ubuntu16 ccls neovim coc.nvim ccls langserver安装
    ubuntu 字体安装 —— 以nerd font为例
    neovim
    vim youcompleteme conda 虚拟环境
    sublime 插件管理
  • 原文地址:https://www.cnblogs.com/zengda/p/4299812.html
Copyright © 2011-2022 走看看