<!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实现菜单栏的更多相关文章

  1. 50 Jquery 库

    一.概念: 1.jquery 的选择器和ccs 相同 2.jquery对象, dom对象的集合,类似python中list,有自己的各种方法和属性 // [dom1,dom2,.....] 3.方便之 ...

  2. jquery-实用例子

    一:jquery实现全选取消反选 3元运算:条件?真值:假值 <!DOCTYPE html> <html lang="en"> <head> & ...

  3. [smartMenu.js] 一个基于jquery的实用的右键拓展菜单栏插件

    正在为电子书阅读器添加精准易用的标记功能,其中一个方案是扩展阅读器界面的右键菜单栏,使得用户右键点击某个词.子句.段落的时候可以进行扩展操作. 右键菜单栏有很多基于jQuery的插件,其中灵活性比较强 ...

  4. Jquery实现特效滑动菜单栏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery 菜单栏 展开与收缩例子

    废话少说,上代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  6. 响应式菜单栏： bootstrap + jQuery

    bootstrap库能够很方便的实现PC和移动上的响应式操作. jQuery库大大的简化了脚本的开发: html: <html> <body> <div class='m ...

  7. jquery制作移动端菜单栏左右滑动

    //菜单栏滑动function move_scollX(){ var startPosition, endPosition, distanceX,distanceY; $(".left&qu ...

  8. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...

  9. jquery页面滚动显示浮动菜单栏锚点定位效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. Django适合做大用户量的系统吗？

    分几点来答: 1. 首先,这其实是个技术选型题. 做技术选型的时候不能单纯的考虑性能,应该优先考虑业务类型,以及团队水平.另外的话,框架只是其中一环,还有配套呢. 如果是数据驱动型,尤其是要用到关系型 ...

  2. Android so注入(inject)和Hook技术学习（三）——Got表hook之导出表hook

    前文介绍了导入表hook,现在来说下导出表的hook.导出表的hook的流程如下.1.获取动态库基值 void* get_module_base(pid_t pid, const char* modu ...

  3. Luogu P5168 xtq玩魔塔

    这题不错啊,结合了一些不太传统的姿势. 首先看到题目有一问从一个点到另一个点边权最小值.想到了什么? 克鲁斯卡尔生成树+倍增?好吧其实有一个更常用NB的算法叫克鲁斯卡尔重构树 (不会的可以看dalao ...

  4. 基于Vue.js 2.0 + Vuex打造微信项目

    一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...

  5. 在开发框架中使用FTP辅助类上传或者下载文件，方便管理附件内容

    在有些系统应用里面,我们需要对应用服务器.数据库服务器.文件服务器进行分开,文件路径等信息存储在数据库服务器里面,但文件内容则存储在文件服务器里面,通过使用FTP进行文件的上传下载,从而实现更加高效的 ...

  6. SpringBoot分布式 - Dubbo+ZooKeeper

    一:介绍 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务.它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护.域名服务.分布式同步.组服务等. Dubbo是Alib ...

  7. 图解HTTP，TCP，IP，MAC的关系

    入门 用户发了一个HTTP的请求,想要访问我们网站的首页,这个HTTP请求被放在一个TCP报文中,再被放到一个IP数据报中,最终的目的地就是我们的115.39.19.22. 进阶 IP数据报其实是通过 ...

  8. mybatis百科-列映射类ResultMapping

    目录 1 成员变量 2 构造函数 3 其他函数 3.1 setter 和 getter 函数 3.2 equals 和 hashCode 函数 3.3 toString 函数 4 内部类 Builde ...

  9. .net core实践系列之短信服务-Sikiro.SMS.Job服务的实现

    前言 本篇会继续讲解Sikiro.SMS.Job服务的实现,在我写第一篇的时候,我就发现我当时设计的架构里Sikiro.SMS.Job这个可以选择不需要,而使用MQ代替.但是为了说明调度任务使用实现也 ...

  10. ASP.NET MVC5+EF6+EasyUI 后台管理系统-WebApi的用法与调试

    1:ASP.NET MVC5+EF6+EasyUI 后台管理系统(1)-WebApi与Unity注入 使用Unity是为了使用我们后台的BLL和DAL层 2:ASP.NET MVC5+EF6+Easy ...