歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="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", "Images/a1.gif");
                    $(".clsContent").css("display", "block"); //顯示內容
                }
            });

            $(".clsBot  > a").click(function () {
                if ($(".clsBot > a").text() == "簡化") { //如果內容為'簡化'字樣
                    $("ul li:gt(4):not(:last)").hide(); //隱藏index號大於4且不是最後一項的元素
                    $(".clsBot > a").text("更多");
                }
                else {
                    $("ul li:gt(4):not(:last)").show().addClass("GetFocus"); //顯示所選元素且增加樣式
                    $(".clsBot > a").text("簡化");
                }
            });
        });
    </script>
</head>
<body>
    <div id="divFrame">
        <div class="clsHead">
            <h3>
                圖書分類</h3>
            <span>
                <img src="Images/a1.gif" alt="" /></span>
        </div>
        <div class="clsContent">
            <ul>
                <li><a href="#">小說</a><i>(1110)</i></li>
                <li><a href="#">文藝</a><i>(230)</i></li>
                <li><a href="#">青春</a><i>(1430)</i></li>
                <li><a href="#">少兒</a><i>(1560)</i></li>
                <li><a href="#">生活</a><i>(870)</i></li>
                <li><a href="#">社科</a><i>(1460)</i></li>
                <li><a href="#">管理</a><i>(1450)</i></li>
                <li><a href="#">計算機</a><i>(1780)</i></li>
                <li><a href="#">教育</a><i>(930)</i></li>
                <li><a href="#">工具書</a><i>(3450)</i></li>
                <li><a href="#">引進版</a><i>(980)</i></li>
                <li><a href="#">其他類</a><i>(3220)</i></li>
            </ul>
            <div class="clsBot">
                <a href="#">簡化</a>
                <img src="Images/a5.gif" alt="" />
            </div>
        </div>
    </div>
</body>
</html>

Copyright © Linux教程網 All Rights Reserved