Jquery实现DIV伸缩特效

林继 VPS 知识 4,072 共写了106个字 (2012-06-07 0:56:43) 没有评论 打印 扫描二维码 百度已收录

首页在head区域加入JS代码

  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(function() {
  4. $(".b2").click(function() {
  5. $("#content").slideToggle("fast");
  6. $('.b2').css("display","none");
  7. $('.b1').css("display","block");
  8. });
  9. $(".b1").click(function() {
  10. $("#content").slideToggle("fast");
  11. $('.b1').css("display","none");
  12. $('.b2').css("display","block");
  13. });
  14. });
  15. </script>

再到body里加入

  1. <div class="title"><a href="javascript:;" class="b2" style="display: block; ">这是是标题</a> <a href="javascript:;" class="b1" style="display: none; ">这是是标题</a></div>
  2. <div id="content">这里是内容</div>

如果要好看的话自己就定义下相应的CSS样式吧

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

< >