jQuery小结6

最新推荐文章于 2024-11-05 15:26:40 发布

weixin_30426065

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量55

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/mr-guan/p/5043792.html

版权

<!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></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <style type="text/css">
        *{margin:0px;padding:0px;}
        body{font-size:12px;}
        
        .box{margin:10px;padding:10px;}
        .box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;}
        .box p{line-height:20px;}
        
        #panels{margin:10px;padding:10px;width:380px;}
        #panels dt{height:30px;line-height:30px;padding-left:10px;border:1px solid #aaccff;font-weight:bold;font-size:14px;background-color:#bb44aa;margin-top:-1px;cursor:pointer;}
        #panels dd{height:230px;padding:10px;line-height:20px;border:1px solid #aaccff;margin-top:-1px;}
        
    </style>
    <script type="text/javascript">
        $(function(){
            $("#panels dd").hide();
            $("#panels dd").first().show();

            $("#panels>dt").click(function(){
                $("#panels dd").slideUp();
                $(this).next().slideToggle();

            });

        });
        
    </script>


</head>
<body>
    <div class="box">
        <h3>试题要求:</h3>
        <p>
            1.点击每组的标题时，显示该标题下的面板；同时隐藏其他的面板。<br />
            2.页面加载完毕后默认显示第一个标题下的面板。<br />
        </p>
    </div>

    <dl id="panels">
        <dt>DotNet23</dt>
        <dd>英雄们，该写作业了......</dd>
        <dt>DotNet24</dt>
        <dd>其实它只是个传说........</dd>
        <dt>DotNet25</dt>
        <dd>未完，待续......</dd>
        <dt>DotNet26</dt>
        <dd>此处省略一万字......</dd>
    </dl>


</body>
</html>