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遍 ...
随机推荐
- leetcode 0218
目录 ✅ 1200. 最小绝对差 描述 解答 cpp py ✅ 897. 递增顺序查找树 描述 解答 cpp 指针问题? fuck ptr py ✅ 183. 从不订购的客户 描述 解答 sql to ...
- Java 石家庄铁道大学软件工程系 学生学籍管理系统 2019 版
本系统的作用是简单实现一些学生成绩管理操作:录入,修改,绩点计算,以及系统退出等. 首先建一个主函数实现界面的实现,然后建一个数据类用来定义存放数据.之后建立一个工具类,用来实现所有要进行的操作.首先 ...
- Mysql基本用法-存储引擎-04
MYSQL中只有 INNODB和BDB 类型的数据表才能支持事务处理!其他的类型是不支持的!(切记!) Mysql基本用法-存储引擎-02中的test_user表 和 phpcvs表 <?php ...
- 第一周之Hadoop学习（一）
首先根据网上的教程得搭建一个linux的环境,所以第一部分是下载虚拟机的过程. 参考博客:https://blog.csdn.net/hliq5399/article/details/78193113 ...
- broadcom sdk command
1.查看端口link状态 BCM.0>ps 2.查看vlan BCM.0>vlan show 3.查看pvlan BCM.0>pvlan show 4.CPU发包 BCM.0> ...
- 解决EFCore缓存机制导致的数据查询错误问题
如题,在对同一个Context连续进行相同条件的查询时,会触发EFCore的缓存机制,如果这个过程中数据发生了变化,则会出现错误. 例如:有两个Context实例,一个负责查询,一个负责增删改, A_ ...
- 最简单、最常用的一些Git命令
---------------------------------------------------------------------------------------------------- ...
- JS 表单相关
var title = $("#subjects option:selected").text();
- Linux centosVMware 自动化运维Ansible介绍、Ansible安装、远程执行命令、拷贝文件或者目录、远程执行脚本、管理任务计划、安装rpm包/管理服务、 playbook的使用、 playbook中的循环、 playbook中的条件判断、 playbook中的handlers、playbook实战-nginx安装、管理配置文件
一.Ansible介绍 不需要安装客户端,通过sshd去通信 基于模块工作,模块可以由任何语言开发 不仅支持命令行使用模块,也支持编写yaml格式的playbook,易于编写和阅读 安装十分简单,ce ...
- java 获取web登录者的ip地址
/** * 获取访问用户的客户端IP(适用于公网与局域网). */ public static final String getIpAddr(final HttpServletRequest requ ...