Jquery实现下拉tab切换
//需求：分别点击html,css,js元素时展示对应的列表内容，其他列表内容要自动收起来
//代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
width: 200px;
list-style: none;
background-color: blueviolet;
color: yellow;
}
h3,li li{
height: 50px;
}
li ul{
display: none;
}
.cur{
background-color: red;
color:pink;
}
.border{
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li class="border">
<h3>html</h3>
<ul class="inner">
<li>标签</li>
<li>选择器</li>
</ul>
</li>
<li class="border">
<h3>css</h3>
<ul class="inner">
<li>文档流</li>
<li>选择器</li>
<li>盒模型</li>
</ul>
</li>
<li class="border">
<h3>js</h3>
<ul class="inner">
<li>dom</li>
<li>bom</li>
<li>ecmascript</li>
</ul>
</li>
</ul>
<script type="text/javascript">
$("h3").mouseover(function(){
$(this).addClass("cur");
}).mouseout(function(){
if ($(this).next().css("display")!="block") {
$(this).removeClass("cur");
}
}).click(function(){
// $(this).addClass("cur");
$(this).next().slideToggle(); //$(this).next()值h3的下一个元素，也就是ul,slideToggle自动切换上下拉
$(".inner").css("background","brown"); //改变下拉选项的背景颜色
$(this).parent().siblings().find("ul").slideUp().prev().removeClass("cur");
})
</script>
</body>
</html>
Jquery实现下拉tab切换的更多相关文章
- jquery实现简单的Tab切换菜单
实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...
- 一款jquery写出来的tab切换
当时做这个的时候,当前状态是不规则的,li对应的有3块内容,分别设定不同背景图片,只显示当前的一个背景,鼠标移上去的时候其余2个用background-position: -1000px 0px;来隐 ...
- jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果
相信选项卡切换是大家常用的效果单独写一个选项卡切换很方便但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> & ...
- 利用DropDownList实现下拉
在视图的Model<Vo>里面我们需要使用IEnumerable来将别的列表的数据全部的转化为下拉列表.下面是关于在项目中实际的写法. 一:实现下拉属性列表的写法 通过使用Select ...
- jQuery实现简单的tab切换
html: <section> <nav id="nav"> <a class="on">tab1</a& ...
- jQuery带小图标的Tab切换焦点图
在线演示 本地下载
- Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换
Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显 ...
- tab切换中的滚动条下拉分页带来的问题
相信做过tab切换中滚动条下拉分页的童鞋都知道,我们在用scroll方法来做滚动条下拉分页的时候,都是有bug,切换中间的内容会互相影响,为了解决这个问题,我总结了2种方法: 1.方法一: <! ...
- jQuery的DOM操作实例（1）——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
随机推荐
- 取消Oracle数据库密码期限 取消用户锁定
1.首先查用户被锁时间:sql>select username,account_status,lock_date from dba_users where username='SA'; 2.解锁 ...
- IDEA中常用优化设置
1.设置鼠标悬浮提示 Editor->General 这里要勾选下,后面设置的是延迟时间 默认半秒:设置后,我们鼠标移动到类上看看: 2.显示方法分隔符 Editor->General - ...
- python脚本监听nginx是否运行
import sys import time import os import logging from logging.handlers import RotatingFileHandler imp ...
- AF（操作者框架）系列（1）-LabVIEW中的模块化应用概述
一.引子 在前面对LabVIEW介绍的文章中,关于框架开发的内容涉及很少.为了讲解操作者框架(Actor Framework)的优缺点,也只是拿出来QDSM(Queue-Driven State Ma ...
- day03-Mybatis中一对一、一对多、多对多查询
一对一查询 一对一的表结构: my_account表: my_user表: 一对一是互相的,A可以找到B,B也可以找到A,方法是一样的,这里就只写一个方向的 通过my_count表找到my_user表 ...
- 「模板」可持久化 HFQ-Treap
老师用的是静态数组的写法,开了很多数组- 其实个人更倾向于 struct 或者用 class 封装起来. 但是鉴于太难打 好吧,是我懒得打. 然后就借鉴了老师的模板,写出了属于自己的 压行 风格. 代 ...
- 算法-leetcode-65-Valid Number
算法-leetcode-65-Valid Number 上代码: # coding:utf-8 __author__ = "sn" """Valida ...
- 十三 Spring的通知类型，切入表达式写法
Spring中通知类型: 前置通知:目标方法执行之前进行操作,可以获得切入点信息 后置通知: 目标方法执行之后进行操作,可以获得方法的返回值 环绕通知:在目标方法执行之前和之后进行操作,可以终止目标方 ...
- js里用 toLocaleString 实现给数字加三位一逗号间隔（有无小数点都适用）
<input type="hidden" id="totalLandArea" value="<%-info.totalLandArea% ...
- 1009 Product of Polynomials (25分) 多项式乘法
1009 Product of Polynomials (25分) This time, you are supposed to find A×B where A and B are two po ...