首页 » 建站技术 » 浏览内容

Jquery实现DIV伸缩特效


2012-06-07 00:56:43 3,661 0 发表评论 字体: 作者:C.K.
标签: DIVJquery

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

首页在head区域加入JS代码

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  • <script type="text/javascript">
  • $(function() {
  • $(".b2").click(function() {
  • $("#content").slideToggle("fast");
  • $('.b2').css("display","none");
  • $('.b1').css("display","block");
  • });
  • $(".b1").click(function() {
  • $("#content").slideToggle("fast");
  • $('.b1').css("display","none");
  • $('.b2').css("display","block");
  • });
  • });
  • </script>
  • 再到body里加入

    <div class="title"><a href="javascript:;" class="b2" style="display: block; ">这是是标题</a> <a href="javascript:;" class="b1" style="display: none; ">这是是标题</a></div>
  • <div id="content">这里是内容</div>
  • 如果要好看的话自己就定义下相应的CSS样式吧

      网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4761 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13193935 位访客

      广告区 Guǎng Gào