<!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> 导航条在项目中的应用 </title>

    <script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></script>

    <style>

        body{font-size:13px}

        #divFrame{

            border:solid 1px #666;

            width:202px;

            /**overflow作用**/

             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 type="text/javascript">

        $(function () { // 页面加载事件

            $(".clsHead").click(function () { // 图片单击事件

                if ($(".clsContent").is(":visible")) { // 如果内容可见

                    $(".clsHead span img")

                        .attr("src", "Images/a1.gif"); // 改变图片

                    // 隐藏内容

                    $(".clsContent").css("display", "none");

                } else {

                    $(".clsHead span img")

                        .attr("src", "Images/a2.gif"); // 改变图片

                    // 显示内容

                    $(".clsContent").css("display", "block");

                }

            });

            $(".clsBot > a").click(function () { // 热点链接单击事件

                // 如果内容为 " 简化 " 字样

                if ($(".clsBot > a").text() == " 简化 ") {

                    // 隐藏 index 号大于 4 且不是最后一项的元素

                    $("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">

        <div class="clsHead">

            <h3> 图书分类 </h3>

            <span><img src="Images/a2.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> ( 3230 ) </i></li>

            </ul>

            <div class="clsBot"><a href="#"> 简化 </a>

                <img src="Images/ a5.gif" alt="" />

            </div>

        </div>

    </div>

</body>

</html>

　　

Jquery | 基础 | 导航条在项目中的应用的更多相关文章

  1. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  2. Bootstrap系列 -- 38. 基础导航条

    在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div), ...

  3. jQuery关于导航条背景切换

    效果如下: <DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jqu ...

  4. jQuery控制导航条样式

    原理:点击当前元素时,当前元素添加(样式类),父辈的兄弟姐妹的孩子('a')去掉此样式类. 代码如下: /*次要导航*/ $(".subnav li a").click(funct ...

  5. bootstrap学习笔记之导航条基础

    导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背 ...

  6. 玩转Bootstrap（基础） -- （6.导航条基础）

    1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  7. bootstrap基础学习【导航条、分页导航】（五）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 在进行vue的学习，项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  9. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

随机推荐

  1. [LightOJ 1018]Brush (IV)[状压DP]

    题目链接:http://lightoj.com/volume_showproblem.php? problem=1018 题意分析:平面上有不超过N个点,如今能够随意方向划直线将它们划去,问:最少要划 ...

  2. Centos-tomcat-安装配置apr

    [root@zyzzw_jk tools]# tar -zxvf apr-1.5.2.tar.gz[root@zyzzw_jk tools]# tar -zxvf apr-util-1.5.4.tar ...

  3. java设计模式----迭代器模式和组合模式

    迭代器模式: 提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. 设计原则: 单一责任:一个类应该只有一个引起变化的原因 组合模式: 允许你将对象组合成树形结构来表现“整体/部分” ...

  4. stm32GPIO8种模式

    stm32GPIO工作模式及用途  1.浮空输入GPIO_IN_FLOATING ——浮空输入,可以做KEY识别,RX1       2.带上拉输入GPIO_IPU——IO内部上拉电阻输入       ...

  5. eclipse通过maven建立java se工程配置log4j，打包成zip，将jar包和配置文件分开，并以bat和sh文件启动java程序

    一.新建maven的java工程 1.eclipse里file-new-other,选择maven Project 2.选中 Use default Workspace location,然后 nex ...

  6. HDFS vs. MongoDB

    HDFS MongoDB 共同点 http://www.mongoing.com/wp-content/uploads/2016/08/MDBSH2016/TJ_MongoDB+Spark.pdf 横 ...

  7. YARN commands are invoked by the bin/yarn script.

    Apache Hadoop 2.9.0 – YARN Commands http://hadoop.apache.org/docs/stable/hadoop-yarn/hadoop-yarn-sit ...

  8. HTML CSS 编码规范

    返璞归真,代码规范也是一门艺术 黄金定律 永远遵循同一套编码规范 -- 可以是这里列出的,也可以是你自己总结的.如果你发现本规范中有任何错误,敬请指正.通过open an issue on GitHu ...

  9. ActiveMQ 入门使用p2p模型-主动消费

    生产者 package clc.active; import com.sun.xml.internal.bind.v2.runtime.unmarshaller.XmlVisitor; import ...

  10. 编译android内核和文件系统，已经安装jdk，提示build/core/config.mk:268: *** Error: could not find jdk tools.jar

    1:确保安装jdk,如果没有安装请移布:http://www.cnblogs.com/jiuyueguang/p/3156621.html 2:如果已经安装了jdk,还是提示此错误, 解决方法 请确保 ...