jQuery导航条在项目中的应用

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">
        body
        {
            font-size: 13px;
        }
        #divFrame
        {
            border: solid 1px #666;
            width: 301px;
            overflow: hidden;
        }
        #divFrame .clsHead
        {
            background-color: #eee;
            padding: 8px;
            height: 18px;
            cursor: hand;
        }
        #divFrame .clsHead h3
        {
            padding: 0px;
            margin: 0px;
            float: left;
        }
        #divFrame .clsHead span
        {
            float: right;
            margin-top: 3px;
        }
        #divFrame .clsContent
        {
            padding: 8px;
        }
        #divFrame .clsContent ul
        {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        #divFrame .clsContent ul li
        {
            float: left;
            width: 95px;
            height: 23px;
            line-height: 23px;
        }
        #divFrame .clsBot
        {
            float: right;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        .GetFocus
        {
            background-color: #eee;
        }
    </style>
    <script src="https://www.linuxidc.com/Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="https://www.linuxidc.com/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () { //页面加载事件
            $(".clsHead").click(function () {
                if ($(".clsContent").is(":visible")) { //如果内容可见
                    $(".clsHead span img").attr("src", "Images/a2.gif"); //改变图片
                    $(".clsContent").css("display", "none"); //隐藏内容
                }
                else {
                    $(".clsHead span img").attr("src", "https://www.linuxidc.com/Images/a1.gif");
                    $(".clsContent").css("display", "block"); //显示内容
                }
            });

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ppssy.html