<!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. 理解CSS中的BFC(块级可视化上下文)[译]

    开篇 一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元 ...

  2. xcode4中build Settings常见参数解析

    本文转载至 http://shiminghua234.blog.163.com/blog/static/263912422012411103526386/     1.Installation Dir ...

  3. 直播:中国HBase技术社区第一届MeetUp

    6月6日,由中国HBase技术社区组织,阿里云主办的中国第一届HBase Meetup将在北京举行,来自阿里.小米.滴滴.360等公司的各位大神会共同探讨HBase2.0的技术革新,HBase在国内各 ...

  4. hadoop yarn namenode datanoe 启动异常问题解决 分析日志

    cat logs/hadoop-root-datanode-hadoop1.log ********************************************************** ...

  5. HDU2295 Radar —— Dancing Links 可重复覆盖

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2295 Radar Time Limit: 2000/1000 MS (Java/Others)     ...

  6. YTU 2453: 我想有套北京的房

    2453: 我想有套北京的房 时间限制: 1 Sec  内存限制: 128 MB 提交: 796  解决: 289 题目描述 小原是一个软件工程师,名叫原黛玛,他在北京工作.现在有一套房子,价格200 ...

  7. Centos7.2——自定义系统服务

    前言 顾明思议,自己创建系统服务,在上一篇博文中写道了,这里就详细写下~ 步骤 我是一段美丽的用户分割的废话~ 进入到系统服务目录 ··· cd /lib/systemd/system ··· 创建服 ...

  8. iOS字符串的各种用法(字符串插入、字符串覆盖、字符串截取、分割字符串)

    NSString* str=@"hello";//存在代码区,不可变 NSLog(@"%@",str); //1.[字符串插入] NSMutableString ...

  9. OpenMediaVault GitLab 安装

    /**************************************************************************** * OpenMediaVault GitLa ...

  10. Burpsuite实验(二)

    一.这次我们使用一下burpsuite的代理拦截功能. 图中的proxy是代理的选项,其中intercept是拦截的功能,在浏览器中请求的包,都经过它. 这是打开拦截时候的状态.forward是通过此 ...