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

  • 相关阅读:
    20200304(10)
    20200303Tuesday(9)
    词根词缀explicit(8)
    词根词缀(7)
    20200303(6)
    什么是ring0-ring3
    20200301a
    mark字体大全
    评估评价 提高专项(5)
    图的广度优先遍历算法
  • 原文地址:https://www.cnblogs.com/zengda/p/4299812.html
Copyright © 2020-2023  润新知