jQuery实现的导航条切换可显示隐藏

用jQuery实现一些导航条切换，显示隐藏，主要运用的技术有slideToggle( )，toggeClass( )，toggle( ):

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航条在项目中的应用</title>
<script language="javascript" type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".tit").find("span").click(function(){
$(this).toggleClass("closeBtn2").parent().next().slideToggle(); //实现内容隐藏显示，及图标的切换
}) ;
$(".clsBot").click(function(){
$(this).parent().find("li:gt(4)").toggle(); //实现内容索引值大于4的隐藏或者显示

})
})
</script>
<style type="text/css">
*{ margin: 0;padding: 0;}
ul li{ list-style: none;}
.box{ width: 400px; margin: 100px auto; border: 1px solid #ddd;}
.tit{ background: #999; height: 30px; color: #fff; font-size: 14px; line-height: 30px; padding-left: 6px; position: relative;}
.closeBtn{ background: url("Images/a2.gif") no-repeat 0 0; width: 7px; height: 8px; position: absolute; right: 10px; top: 10px; display: block; text-indent: -9999px; cursor: pointer;}
.closeBtn2{background: url("Images/a1.gif") no-repeat 0 0;}
.content{padding: 6px;font-size: 12px; overflow: hidden; }
.content li{ float: left; width: 100px; height: 24px; }
.content li a{ color: #999;}
.content li a:hover{ color: red;}
.clsBot{ display: block; clear: both; background: url("Images/a5.gif") no-repeat right 0; padding-right: 16px; float: right; width: 26px; cursor: pointer; color: blue;}
</style>
</head>
<body>
<div class="box">
<div class="tit">
<h2>图书分类</h2>
<span class="closeBtn">关闭</span>
</div>
<div class="content">
<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>
<span class="clsBot">简化</span>
</div>
</div>
</body>
</html>

效果图：

赞 (0)

相关推荐

  • 实例讲解Jquery中隐藏hide、显示show、切换toggle的用法

    实例讲解Jquery中隐藏hide、显示show、切换toggle的用法

    本文实例为大家分享了jquery中show().hide()和toggle()用法实例,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>初识jQuery</title> <script src="http:/www.jb51.net/

  • 用jQuery实现一些导航条切换,显示隐藏的实例代码

    代码如下: 复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>导航条在项目中的应用</title>    <script language="javascript" type="text/javascript" src="Jscript/jquery-1.4.2

  • Jquery实现点击切换图片并隐藏显示内容(2种方法实现)

    我们的电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢? 我们应该给用户足够的选择权,当他们想要看某些内容的时候可以很快的看到,不想看的时候就把他隐藏.于是就有了题目说的这个问题. 其实这个问题很简单,那么,之所以拿出来跟大家分享,一方面我们大家相互交流,另一方面,也是对自己的学习的一种总结. 这里我想到了两种方法,给大家分享一下. 好了不多说,下面看代码: 第一种,是常规的方法: [javascript] 复制代码 代码如下: $(function(){ var images = ['

  • jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)

    实例 通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素: 复制代码 代码如下: $(".btn1").click(function(){ $("p").slideToggle(); }); 定义和用法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 语法 $(selector).slideToggle(speed,callback)参

  • jQuery通过改变input的type属性实现密码显示隐藏切换功能

    一般我们做登录注册的时候都会提供一个让用户选择自己输入的密码是否显示的需求, 这种需求我们肯定会想到只要动态改变input的type属性不就好了(text显示/password隐藏): 于是我用了$(''#id).attr('type', 'password')这个API 然而结果并不是我想的那样,出错了 HTML 代码 Uncaught Error: type property can't be changed 意思大概就是这个属性不能被修改. 于是我就googl一手. 然而我得到的结果是这样

  • jQuery实现切换隐藏与显示同时切换图标功能

    HTML代码: <!doctype html> <html> <head> <meta charset=" utf-8"> <title>jq隐藏显示图标切换</title> <!--引入jq文件--> <script type="text/javascript" scr="./js/jquery.min.js"></script> <

  • jQuery控制元素显示、隐藏、切换、滑动的方法总结

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 复制代码 代码如下: $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); hide() 和 show() 都可以设置两个可选参数:speed 和 callba

  • jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

    jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

    已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记. 这几天在写后台文章的一些页面,为了能得到更好的交互性,需要做一些效果,js无疑使不二之选,但由于浏览器的兼容性一直差强人意,所以选用jquery框架,通过css样式.dom节点以及自身所带函数就可以实现比较好的用户体验,此案例有三个功能

  • jQuery实现的导航条切换可显示隐藏

    jQuery实现的导航条切换可显示隐藏

    用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航条在项目中的应用</title> <script language="javascript" type="

  • jQuery实现的导航条点击后高亮显示功能示例

    jQuery实现的导航条点击后高亮显示功能示例

    本文实例讲述了jQuery实现的导航条点击后高亮显示功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jQuery导航条点击后高亮显示</title> <script src="http://libs.baidu.com/jq

  • 微信小程序实现点击导航条切换页面

    本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下 我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navState参数用于判断导航的当前状态, 定义了data-index用于js中动态修改导航的当前状态, nav-switch-style为选择导航条时的样式, 不可滑动视图切换很简单,用wx:if判断状态显示相应页就好了, 滑动页视图切换要用到swiper和 swiper-item, 用bindchang方

  • Vue切换div显示隐藏,多选，单选代码解析

    切换div显示隐藏 1)单个item下的部分dom结构,显示或隐藏切换,不会修改其它同级dom的显示/隐藏 template dom结构 <div class="list-item" v-for="(list,index) in jobList"> <p class="job-name">{{list.jobName}}</p> <p class="job-info"> <

  • 基于JQuery实现鼠标点击文本框显示隐藏提示文本

    基于JQuery实现鼠标点击文本框显示隐藏提示文本

    比如本人网站的搜索框: 不使用的时候: 鼠标点击后: 用JQuery实现这个效果非常简单,下面是代码: 复制代码 代码如下: $(document).ready(function () { var searchBox = $("#ctl00_txtSearch"); searchBox.focus(function () { if (searchBox.val() == this.title) { // TextBox控件ToolTip属性转换为Html为title属性 searchB

  • Android仿微信实现首字母导航条

    Android仿微信实现首字母导航条

    本文介绍Android实现首字母导航条,先看张效果图,具体怎么实现看代码吧 具体的步骤 1.整体布局的显示 2. 实现A-Z的分组 3. 自定义A-Z的导航条 4. 中间显示/隐藏触摸到导航条具体的字母 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/re

  • jQuery实现电梯导航案例详解(切换 网页区域)

    目录 前言: 一:效果展示 二:实现原理剖析 2.1 网页结构: 2.2 显示隐藏函数 实现分析: 2.3 点击导航滚至对应板块 实现分析: 2.4 页面滚动导航对应选择实现分析: 2.5 互斥锁 实现分析: 三:完整代码 前言: 日常生活中用手机,电脑浏览网页时,滑到了页面下端后想返回顶部 或 跳转到页面别的版块,用鼠标滚动很麻烦,网页电梯导航 就可以很方便的精准到达目标版块. 一:效果展示 [gif 动图演示]格式转换有些不清晰请谅解!功能实现包含以下: 点击电梯导航切换到对应板块 移动光标

  • bootstrap中的导航条实例代码详解

    一.和导航的区别 1.导航条比导航多了一个条字 2.直接上图 导航: 导航条: 简单文字描述: 由两张图看出,导航内容比较简单,而导航条可以包含导航及其他元素,如表单,搜索框等,并且通常导航条会有一个区别于页面的背景色. 二.在页面中定义导航条 方法: 为父容器添加类名navbar navbar-default.navbar-default类用来规定导航条的颜色,可以更改为navbar-inverse来让导航条反色显示.bootstrap官网建议使用nav元素.但也常用div元素,建议用div元

  • 基于jQuery实现中英文切换导航条效果

    基于jQuery实现中英文切换导航条效果

    先来看一下中英文切换的导航条效果图: 我采用了两种方式实现,一种用css3,另一种是用jquery实现. 首先说一下用css3如何实现: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <link rel="stylesheet" href=&q

随机推荐