导航条在项目中的应用

最新推荐文章于 2024-09-11 12:01:27 发布

饭fan有引力

最新推荐文章于 2024-09-11 12:01:27 发布

阅读量851

点赞数

文章标签： class float function xhtml div border

本文链接：https://blog.csdn.net/Iamduoluo/article/details/7440370

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

#========================================================================
#   FileName: demo5.html
#     Author: lowkey
#      Email: 361789273@qq.com
#   HomePage: http://blog.csdn.net/Iamduoluo
# LastChange: 2012-04-09 12:14:36
#========================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    
        <title>Demo5</title>
        <style type="text/css" media="screen">
            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="../jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            $(function() {
                    $(".clsHead").click(function() {
                        if($(".clsContent").is(":visible")) {
                            $(".clsHead span img")
                            .attr("src", "a2.jpg");
                            $(".clsContent").css("display", "none");
                        }else{
                            $(".clsHead span img")
                            .attr("src", "a2.jpg");
                            $(".clsContent").css("display", "block");
                        }
                    });
                    $(".clsBot > a").click(function() {
                        if($(".clsBot > a").text()=="简化") {
                            $("ul li:gt(4):not(:last)").hide();
                            $(".clsBot > a").text("更多");
                        }else{
                            $("ul li:gt(4):not(:last)")
                            .show()
                            .addClass("GetFocus");
                            $(".clsBot > a").text("简化");
                        }    
                    });
            });
        </script>
        
    </head>
    <body>
        <div id="divFrame" class="">
            <div id="" class="clsHead">
                <h3>图书分类</h3>
                <span><img src="a2.jpg" alt="" /></span>
            </div>
            <div id="" class="clsContent">
                <ul id="" class="">
                    <li id="" class=""><a href="#">小说</a><i>(1110)</i></li>
                    <li id="" class=""><a href="#">文艺</a><i>(1110)</i></li>
                    <li id="" class=""><a href="#">青春</a><i>(1110)</i></li>
                    <li id="" class=""><a href="#">少儿</a><i>(1110)</i></li>
                    <li id="" class=""><a href="#">生活</a><i>(1110)</i></li>
                    <li id="" class=""><a href="#">社科</a><i>(1110)</i></li>
                    <li id="" class=""><a href="#">管理</a><i>(1110)</i></li>
                    <li id="" class=""><a href="#">计算机</a><i>(1110)</i></li>
                    <li id="" class=""><a href="#">教育</a><i>(1110)</i></li>
                    <li id="" class=""><a href="#">工具书</a><i>(1110)</i></li>
                    <li id="" class=""><a href="#">引进版</a><i>(1110)</i></li>
                    <li id="" class=""><a href="#">其他类</a><i>(1110)</i></li>
                </ul>
                <div id="" class="clsBot">
                    <a href="#">简化</a>
                    <img src="a2.jpg" alt="" />
                </div>
            </div>
        </div>
    </body>
</html>