<!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. CF741 D Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths

    题目意思很清楚了吧,那么我们从重排回文串的性质入手. 很容易得出,只要所有字符出现的次数都为偶数,或者有且只有一个字符出现为奇数就满足要求了. 然后想到什么,Hash?大可不必,可以发现字符\(\in ...

  2. C# WPF仿360安全卫士11

    首先上效果图: 这是我的第一篇随笔,最近因为写一个播放器,开始学习WPF相关技术,随着不断入坑,播放器倒是做出来了,掉坑里了... 本着闲着也是闲着的精神,拿360开刀了: 主界面主要使用DMSkin ...

  3. Spring MVC+ Spring + Mybatis从零开始搭建一个精美且实用的管理后台

    点击进入<SSM搭建精美实用的管理系统>达人课页面 SSM 框架即 SpringMVC+Spring+Mybatis,相信各位朋友在投递简历时已直观感受到它的重要性,JavaWeb 相关工 ...

  4. codeforces#766 D. Mahmoud and a Dictionary （并查集）

    题意:给出n个单词,m条关系,q个询问,每个对应关系有,a和b是同义词,a和b是反义词,如果对应关系无法成立就输出no,并且忽视这个关系,如果可以成立则加入这个约束,并且输出yes.每次询问两个单词的 ...

  5. OSS网页上传和断点续传（OSS配置篇）

    OSS网页上传和断点续传主要根据BrowserJS-SDK和相关文档整理而得,快速构建OSS上传应用 一.Bucket设置 浏览器中直接访问OSS需要开通Bucket的CORS设置 将allowed ...

  6. mybatis的mapper注入失败

    因为处在两个不同的资源文件夹下: 导致classpath无法加载其中一些文件,所以修改为classpath*后顺利进行. <!-- 加载spring容器 --> <!-- neede ...

  7. gnuplot画折线图

    之前尝试用jfreechart画自定义横坐标的折线图或时序图,发现很复杂,后来改用gnuplot了. gnuplot在网上一搜就能找到下载地址. 安装完成后,主要是命令行形式的交互界面,至少比jfre ...

  8. Java 集合的简单理解

    集合(容器) Java的集合类分别是Collection接口和Map接口派生而来. Collection接口 对于实现Collection接口的子类,都会实现Collection接口中抽象方法,所以他 ...

  9. shell脚本--eval执行shell命令

    和其他语言的eval功能差不多,都是将一个保存执行语句的变量作为参数,eval会让变量所保存的语句执行. 下面是一个执行表单提交的命令:注意,这里只是示例,应用中不要这么使用,很危险 #!/bin/b ...

  10. marMariaDB & MYSQL flexviews

    Using Flexviews - part one, introduction to materialized views - Percona Database Performance Bloght ...