Jquery实现菜单栏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JQ.js"></script>
<script>
window.onload = function () {
$(".title").click(function () {
$('.body').addClass('hide');
$(this).next().removeClass("hide");
});
};
</script>
<style>
body {
margin: 0;
}
.menu {
width: 234px;
background-color: steelblue;
}
.item {
line-height: 50px;
text-align: center;
border-bottom: white solid 1px;
}
.hide {
display: none;
}
.title:hover {
color: green;
cursor: pointer;
}
.content {
background-color: #b0b0b0;
border: black solid 1px;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="body hide" id="d1">
<div class="content">内容1</div>
<div class="content">内容1</div>
<div class="content">内容1</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="body hide ">
<div class="content">内容1</div>
<div class="content">内容1</div>
<div class="content">内容1</div>
<div class="content">内容1</div>
<div class="content">内容1</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="body hide">
<div class="content">内容1</div>
<div class="content">内容1</div>
<div class="content">内容1</div>
</div>
</div>
</div>
</body>
</html>
Jquery实现菜单栏的更多相关文章
- 50 Jquery 库
一.概念: 1.jquery 的选择器和ccs 相同 2.jquery对象, dom对象的集合,类似python中list,有自己的各种方法和属性 // [dom1,dom2,.....] 3.方便之 ...
- jquery-实用例子
一:jquery实现全选取消反选 3元运算:条件?真值:假值 <!DOCTYPE html> <html lang="en"> <head> & ...
- [smartMenu.js] 一个基于jquery的实用的右键拓展菜单栏插件
正在为电子书阅读器添加精准易用的标记功能,其中一个方案是扩展阅读器界面的右键菜单栏,使得用户右键点击某个词.子句.段落的时候可以进行扩展操作. 右键菜单栏有很多基于jQuery的插件,其中灵活性比较强 ...
- Jquery实现特效滑动菜单栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 菜单栏 展开与收缩例子
废话少说,上代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- 响应式菜单栏： bootstrap + jQuery
bootstrap库能够很方便的实现PC和移动上的响应式操作. jQuery库大大的简化了脚本的开发: html: <html> <body> <div class='m ...
- jquery制作移动端菜单栏左右滑动
//菜单栏滑动function move_scollX(){ var startPosition, endPosition, distanceX,distanceY; $(".left&qu ...
- jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
- jquery页面滚动显示浮动菜单栏锚点定位效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- 【vue】vue-router跳转路径url多种格式
1.形如 http://localhost:8080/#/book?id=**** ①路由配置 ②路由定向链接,以query传参id 另外,获取query传递的参数id用 this.$route. ...
- @vue/cli 3 运行支持报错 socket
问题 /sockjs-node/info 无限报错 解决方案 原因是相关代理端不支持 ws,因此需要在代理处关闭 ws,即 ws: false,如下: vue.config.js const ds_p ...
- 初识Python-1
1,计算机基础. 2,python历史. 宏观上:python2 与 python3 区别: python2 源码不标准,混乱,重复代码太多, python3 统一 标准,去除重复代码. 3,pyth ...
- LCT维护删除时间最晚生成树
用来做动态图问题. 维护一棵删除时间最晚的生成树,这样好处是加入一条非树边时可以直接判断加还是不加,没有现在不加入而之后再加入的情况.要是我比你先被删,那我就完全没必要加.否则你现在就可以被删除掉.
- Alpha冲刺阶段评分发布
一班 二班 三班 四班
- Largest Rectangle in a Histogram HDU - 1506 （单调栈）
A histogram is a polygon composed of a sequence of rectangles aligned at a common base line. The rec ...
- 逻辑回归为什么用sigmoid函数
Logistic回归目的是从特征学习出一个0/1分类模型,而这个模型是将特性的线性组合作为自变量,由于自变量的取值范围是负无穷到正无穷. 因此,使用logistic函数(或称作sigmoid函数)将自 ...
- 每周分享之JS数组的使用
数组,一堆数字归为一组,就是一个数组,一堆对象放在一个组里,也是一个数组,概念很容易懂,说白了就是一个有限集合. JS数组的语法无法两种,插入和移除(语法自行科普).用处挺常见的,既然数组是一个集合, ...
- [options] 未与 -source 1.6 一起设置引导类路径
用ant与eclipse编译Cassandra 1.2.19,出现了“ [options] 未与 -source1.6一起设置引导类路径”的警告,并出现了一些编译错误,提示编译失败,上网找了很 多资料 ...
- # 【Python3练习题 004】输入某年某月某日，判断这一天是这一年的第几天？
# [Python练习题 004]输入某年某月某日,判断这一天是这一年的第几天? # 思路:先判断是否为闰年,这关系到 2 月份的天数.# 之后再根据月份值把前几个月的天数累积加起来,最后再加上个“日 ...