简单的模块导航

最新推荐文章于 2024-08-13 20:57:25 发布

iteye_2680

最新推荐文章于 2024-08-13 20:57:25 发布

阅读量95

点赞数

分类专栏： jQuery 文章标签： html jquery ViewUI

本文链接：https://blog.csdn.net/iteye_2680/article/details/82451144

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery学习系统-导航条在项目中的应用</title>
<link href="/res/common.css" rel="stylesheet" type="text/css">
<style type="text/css">
#divFrame{
    width:301px;
    font-size:14px;
    border:1px solid #00CCFF;
    overflow:hidden;
}
#divFrame .clsHead{
    padding:8px;
    background-color:#EEE;
    height:18px;
    cursor:pointer;
}
#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;
    padding:0px;
    margin:0px;
}
#divFrame .clsContent ul li{
    float:left;
    width:95px;
    height:23px;
    line-height:23px;
}
#divFrame .clsContent ul li:nth-child(n+6){
    display:none;
}
#divFrame .clsContent ul li:nth-last-child(1){
    display:block;
}
#divFrame .clsContent .clsBot{
    float:right;
    padding-top:5px;
    padding-bottom:5px;
}
.getFocus{
    background-color:#EEE;
}
</style>
<script type="text/javascript" src="/res/jquery-1.6.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $(".clsHead").click(function(){
    if($(".clsContent").is(":visible")){//如果列表内容可见
    $(".clsHead span img").attr("src","/img/down.gif");//改变图片内容
    $(".clsContent").css("display","none");//隐藏内容
    }else{
    $(".clsHead span img").attr("src","/img/up.gif");//改变图片内容
    $(".clsContent").css("display","block");//显示内容
    }
    });
    $(".clsBot > a").click(function(){
    if($(".clsBot > a").text()=="简化"){
    $("ul li:gt(4):not(:last)").hide();//可以看出li的index是从0开始的
    $(".clsBot > a").text("更多");
    $(".clsBot > img").attr("src","/img/down.gif");
    }else{
    $("ul li:gt(4):not(:last)").show().addClass("getFocus");
    $(".clsBot > a").text("简化");
    $(".clsBot > img").attr("src","/img/up.gif");
    }
    });
    });
</script>
</head>
<body>
   <div align="center">
        <div id="divFrame">
            <div class="clsHead">
                <h3>图书分类</h3><span><img src="/img/up.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>(1560)</i></li>
                  <li><a href="#">少儿</a><i>(1432)</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>(3230)</i></li>
               </ul>
               <div class="clsBot">
                  <a href="#">更多</a><img src="/img/down.gif" alt=""/>
               </div>
            </div>
        </div>
   </div>
</body>
</html>
代码运行后的显示效果：（见附件）

iteye_2680

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的模块导航

&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;
复制链接

扫一扫

专栏目录