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>

  <title>jQuery事件的连接</title>

  <style type="text/css">

  .divFrame{ width:260px; border:1px solid #666; font-size:10px }

  .divTitle{ background-color:#eee; padding:5px}

  .divContent{ padding:5px; display:none}

  .divCurrColor{ background-color:Red}

  </style>

  <script src="jquery-1.9.1.js" type="text/javascript"></script>

  <script type="text/javascript">

  $(function(){

  $('.divTitle').click(function () {

  $('.divTitle').addClass('divCurrColor')

  .next('.divContent').css('display','block')

  })

  })

  </script>

  </head>

  <body>

  <div class="divFrame">

  <div class="divTitle">主题</div>

  <div class="divContent">

  <a href="图片设置.htm">图片设置</a><br />

  <a href="展开图片和收缩图片.htm">展开图片和收缩图片</a><br />

  </div>

  </div>

  </body>

  </html>

  实现以下效果

Jquery事件的连接使用示例

  点击它,会显示如下效果

Jquery事件的连接使用示例