文档章节

点击菜单 弹出层隐藏及显示

木子jd
 木子jd
发布于 2016/12/02 16:45
字数 209
阅读 6
收藏 0
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>菜单点击下拉框出现</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script src="jquery-1.11.3.min.js"> </script>
    <script src="text.js"> </script>
    <style>
        .cont {
            width: 200px;
            margin: 100px 0;
            background: red;
        }
        .cont1,
        .cont2 {
            opacity: 0;
            height: 0;
        }
        
        .tab1 .cont1,
        .tab2 .cont2 {
            transition: all .5s ease;
            opacity: 1;
            height: 200px;
        }
    </style>
</head>
<body>
    <ul>
        <li ref="tab1"><a href="">tab1</a></li>
        <li ref="tab2"><a href="">tab2</a></li>
    </ul>
    <ul class="cont">
        <li class="cont1"><a href="">ocntent1</a></li>
        <li class="cont2"><a href="">ocntent2</a></li>
    </ul>
</body>
</html>

index.js
$(document).ready(function () {
    $("li").click(function (e) { 
        e.preventDefault();
        $this=$(this);
       
        $("body").removeClass().addClass($this.attr("ref"));
        
    });
});




思路:

点击菜单出现弹出层的制作窍门:
在点击的时候在 body addClass / removeClass
通过 这个Class 覆盖 弹出层的显示及隐藏
其他 弹出层同理
在父元素 + / - Class的方案
选要有动画的元素 全部 + transition: all .5s ease;

 

© 著作权归作者所有

共有 人打赏支持
上一篇: 梯形
木子jd
粉丝 1
博文 16
码字总数 7602
作品 0
广州
程序员
私信 提问
Navicat Mac 虚拟组和连接颜色的作用

Navicat Mac 虚拟组旨在提供一个按类别逻辑分组对象的平台,以便使全部对象得到有效保护。Navicat Mac 提供颜色高亮显示连接以识别连接及它们的数据库对象。 Navicat Mac虚拟组 虚拟组 Navi...

Navicat数据库管理工具
2016/10/11
3
0
1.9 Illustrator参考线的使用 [Illustrator CC教程]

本节课将为您演示,如何使用参考线,精确的定位和捕捉对象。首先依次点击[视图 > 标尺 > 显示标尺]命令。 然后点击图层面板中的[新建图层]按钮,创建一个新的图层。您将在新图层上创建参考线...

fzhlee
2018/04/08
0
0
1.1 Illustrator选项卡标签的使用

本节课将为您演示选项卡标签的使用。首先依次点击[文件 > 打开]命令,弹出打开窗口,打开一份示例文件。 Illustrator互动教程-酷课堂 在弹出的[文件]菜单中,点击[打开]命令,弹出[打开]窗口...

fzhlee
2018/04/08
0
0
Altium Designer -- 精心总结

如需转载请注明出处:http://blog.csdn.net/qq_29350001/article/details/52199356 以前是使用DXP2004来画图的,后来转行。想来已经有一年半的时间没有画过了。突然转到AD,有些不适应。用了...

qq_29350001
2016/08/13
0
0
JS_stopPropagation, preventDefault 和 return false

因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), prevent...

喵王不瞌睡
2014/12/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Windows 上安装 Scala

在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了。 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法。 接下来,我们可以从 ...

honeymose
今天
1
0
数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
今天
3
0
nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
5
0
java 反射

基本概念 RTTI,即Run-Time Type Identification,运行时类型识别。RTTI能在运行时就能够自动识别每个编译时已知的类型。   要想理解反射的原理,首先要了解什么是类型信息。Java让我们在运...

细节探索者
昨天
2
0
推荐转载连接

https://www.cnblogs.com/ysocean/p/7409779.html#_label0

小橙子的曼曼
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部