摘要:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head>     <title>jQuery事件的连接</title>     <style type="text/css">     .pFrame{ width:260px; border:1px solid #666; font-size:10px }     .pTitle{ background-color:#eee; padding:5px}     .pContent{ padding:5px; display:none}     .pCurrColor{ background-color:Red}     </style>     <script src="jquery-1.9.1.js" type="text/javascript"></script>     <script type="text/javascript">     $(function(){         $('.pTitle').click(function () {             $('.pTitle').addClass('pCurrColor')             .next('.pContent').css('display','block')          })         })     </script> </head> <body> <p class="pFrame">  <p class="pTitle">主题</p>  <p class="pContent">  <a href="图片设置.htm">图片设置</a><br />  <a href="展开图片和收缩图片.htm">展开图片和收缩图片</a><br />  </p> </p> </body> </html>

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>jQuery事件的连接</title>
    <style type="text/css">
    .pFrame{ width:260px; border:1px solid #666; font-size:10px }
    .pTitle{ background-color:#eee; padding:5px}
    .pContent{ padding:5px; display:none}
    .pCurrColor{ background-color:Red}
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
        $('.pTitle').click(function () {
            $('.pTitle').addClass('pCurrColor')
            .next('.pContent').css('display','block')
    
    })
   
    })
    </script>
</head>
<body>
<p class="pFrame">
 <p class="pTitle">主题</p>
 <p class="pContent">
 <a href="图片设置.htm">图片设置</a><br />
 <a href="展开图片和收缩图片.htm">展开图片和收缩图片</a><br />
 </p>
</p>
</body>
</html>

实现以下效果

 

javascript代码实例教程-Jquery事件的连接-脚本宝典

点击它,会显示如下效果

 

 

javascript代码实例教程-Jquery事件的连接-脚本宝典

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_8809.html