文档章节

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

木子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
广州
程序员
1.9 Illustrator参考线的使用 [Illustrator CC教程]

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

fzhlee
04/08
0
0
Navicat Mac 虚拟组和连接颜色的作用

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

Navicat数据库管理工具
2016/10/11
3
0
Altium Designer -- 精心总结

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

qq_29350001
2016/08/13
0
0
1.1 Illustrator选项卡标签的使用

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

fzhlee
04/08
0
0
ionic 学习之 上拉菜单、背景层、下拉列表

简介 这一篇是我开始学习ionic JavaScript 部分的第一篇,所以已经做好了踩坑的准备,而且可能会遇到很多不懂的地方,所以随手注释,笔记会凌乱些。而且此前没有学angularjs,所以也会补充些...

邪人君子
01/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JavaFX WebView概述,很强大,内置了类似Electron的功能

来自 Murali Billa JavaFX技术人员的主要成员 在本博客中,我们将了解JavaFX如何呈现网页及其主要的组件 - 即WebView JavaFX是: 用于创建和交付桌面应用程序的软件平台,以及可以在各种设备...

GuoMengyue
18分钟前
3
0
数据库监控系统小实现1

需求:通过java 去调取python 去目标数据库采集信息,然后插入到数据库,由前台UI显示出来,从而达到监控目的。 设计:通过java的Runtime.getRuntime().exec(args1)方法去调用python脚本,j...

hnairdb
21分钟前
0
0
spring boot logback-spring 配置 日志分文件

因为更规规范化,想将日志分文异常类型,分别存储起来,方便以后查询问题。 以下是 logback-spring.xml 配置: <?xml version="1.0" encoding="UTF-8"?><configuration scan="true"> ...

诺岚
22分钟前
1
0
OSChina 周三乱弹 —— 这下回去要被老婆挠死

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @andonny :分享Passenger的单曲《Let Her Go》 《The Importance of Being Idle》-Noel Gallagher/It's a Cover Up 手机党少年们想听歌,请使...

小小编辑
40分钟前
576
18
RedHat已更改其开源许可规则

对于编程圈外的人来说,软件许可证似乎并不重要,但是,在开源领域,开源许可是非常重要的。 因此,领先的Linux公司Red Hat宣布了一件大事,所有新的由Red Hat发起的使用GNU通用公共许可证(...

linuxCool
53分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部