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遍 ...
随机推荐
- IDEA中常用优化设置
1.设置鼠标悬浮提示 Editor->General 这里要勾选下,后面设置的是延迟时间 默认半秒:设置后,我们鼠标移动到类上看看: 2.显示方法分隔符 Editor->General - ...
- Pako.js压缩解压,vue压缩解压,前后端之间高效数据传输
项目开发中常常会遇到前后端之间有大量数据传输占用带宽导致页面响应慢的问题,这时候我们可以考虑使用Pako.js对信息进行压缩之后传输. 我在前端使用的是vue-element-admin前端框架.框架 ...
- JavaScript相关
用文本编辑软件和浏览器就能开发和调试JavaScript代码 Node.js 在浏览器之外(服务器端)独立运行Ja¬vaScript代码的Node.js于2009年问世,一个独立的JavaScrip ...
- 工业现场总线和工业以太网和工业IIOT
IIoT 称为工业物联网 ,包括机器的预测性维护和生产单元的自动化控制.以更高的速度获取和访问更大量的数据,打破数据孤岛,并将所有人员,数据和流程从工厂车间连接到执行办公室.企业领导者可以使用 IIo ...
- requests 用法小速记
Request库安装方法 Request官网 使用管理员权限启动 command控制台(win+X 命令提示符(管理员)) 使用pip安装requests库(默认配置好python以及pip的环境变量 ...
- php 算法知识 猴子选大王
一群猴子排成一圈,按1,2,...,n依次编号. 然后从第1只开始数,数到第m只,把它踢出圈, 从它后面再开始数,再数到第m只,在把它踢出去..., 如此不停的进行下去,直到最后只剩下一只猴子为止,那 ...
- Unity3D~纹理格式
因为之前自己从来没有好好看过这部分,一直都是用的DXT压缩图片,结果发现原来ios是不支持DXT的, 还不知道我项目那么卡是不是这部分引起的, 但愿是~这样应该就可以解决游戏在ios上只有6.8帧的问 ...
- Caffe2 创建你的专属数据集（Create Your Own Dataset）[9]
这一节尝试把你的数据转换成caffe2能够使用的形式.这个教程使用Iris的数据集.你可以点击这里查看Ipython Notebook教程. DB数据格式 Caffe2使用二进制的DB格式来保存数据. ...
- 【转载】Oracle sqlplus中最简单的一些命令，设置显示的格式
登录数据库: 方式(1)当我们刚安装Oracle数据库时,登录账户时可以使用win+r 输入sqlplus,进入sqlplus命令窗口,然后输入用户名和密码,这里输入密码时不会有回显 方式(2)使用w ...
- Linux (Ubuntu) 服务器安装MySQL，设置不限ip，root远程密码访问
1.注释bind-address = 127.0.0.1 sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf 将bind-address = 127.0.0.1 ...