分享

div css outlookbar

 kfkfzwd 2011-07-30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="www./1999/xhtml">
    <head>
    <title>仿QQ的下拉折叠菜单 站长学院 www.</title>
    <meta http-equiv="content-Type" content="text/html;charset=gb2312">
    <style type="text/css">
    body {font-size: 76%}
    #list {width: 250px; border-top: 1px solid #000}
    #list dt {text-align: center; font-weight: bold; color: #779; padding: 5px; cursor: pointer; background: #cce; border-width: 0 1px 1px 1px; border-color: #333; border-style: solid}
    #list dd {margin-left: 0; display: none; padding: 20px; border-width: 0 1px 1px 1px; border-color: #333; border-style: solid}
    #list dd.vis {display: block}
    h2 {font-weight: bold; font-size: 1.2em}
    p {margin-left: 15px; color: #666}
    </style>
    <script type="text/javascript">
    function all (arr, func)
    {
    for (var i=0,a; a = arr [i]; i++)
    {
    func (a);
    }
    }
    function show (event)
    {
    var e = event || window.event;
    var src = e.srcElement || e.target;
    defins = document.getElementById ('list').getElementsByTagName ('dd');
    all (defins, function (d) {if (d.className != '') {d.className = '';}});
    nextSib = src.nextSibling;
    while (nextSib.nodeType != 1)
    {
    nextSib = nextSib.nextSibling;
    }
    nextSib.className = 'vis';
    }
    function init ()
    {
    titles = document.getElementById ('list').getElementsByTagName ('dt');
    all (titles, function (t) {t.onclick = show});
    }
    window.onload = init;
    </script>
    </head>
    <body id="summery_070825">
    <dl id="list">
    <dt>星期一</dt>
    <dd class="vis">
    <h2>星期一开始了</h2>
    <p>忙碌的一周又开始了,朋友你准备好了吗?</p>
    </dd>
    <dt>星期二</dt>
    <dd>
    <h2>星期二怎么样呢?</h2>
    <p>是不是开始放松自己了呢?</p>
    </dd>
    <dt>星期三</dt>
    <dd>
    <h2>听人说:</h2>
    <p>过了星期三,一天快一天!!</p>
    </dd>
    <dt>星期四</dt>
    <dd>
    <h2>研究一下AJAX</h2>
    <p>准备把网站加入AJAX</p>
    </dd>
    <dt>星期五</dt>
    <dd>
    <h2>明天就要解放了!</h2>
    <p>真是高兴,可以和老婆在一起了!期盼啊……。</p>
    </dd>
    </dl>
    </body>
    </html>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多