<!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. span<T>之高性能字符串操作实测

    .net中的字符串操作性能问题由来已久,幸运的是微软推出了span<T>高性能指针操作封装工具类.这个类到底有多高的性能呢?网上传言反正很高,但是实际上在网上很难找到合适的测试实例,这让本 ...

  2. React-记connect的几种写法

    第一种 最普通,最常见,delllee和官网第写法. import React, { Component } from 'react'; import {connect} from 'react-re ...

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

    全局符号表(GOT表)hook实际是通过解析SO文件,将待hook函数在got表的地址替换为自己函数的入口地址,这样目标进程每次调用待hook函数时,实际上是执行了我们自己的函数. GOT表其实包含了 ...

  4. FineUIMvc新特性速递（大间距模式，隐藏菜单垂直滚动条）

    即将发布的 FineUIMvc 新版本会引入两个重要的特性,用来提升用户体验,现在就来先睹为快吧: 大间距模式 我们已经支持的显示模式有:紧凑模式,普通模式,大字体模式. 紧凑模式: 普通模式: 大字 ...

  5. 深入浅出Tomcat/1- 来历和配置文件

    背景 Tomcat是一个非常重要的Web Server,已经存在多年.尤其是最近几年,因为Spring MVC或是Spring Boot的盛行,Tomcat的地位越发重要,地位明显升级.   我相信很 ...

  6. 【NLP】Attention Model（注意力模型）学习总结

    最近一直在研究深度语义匹配算法,搭建了个模型,跑起来效果并不是很理想,在分析原因的过程中,发现注意力模型在解决这个问题上还是很有帮助的,所以花了两天研究了一下. 此文大部分参考深度学习中的注意力机制( ...

  7. Nginx 通过 Lua + Redis 实现动态封禁 IP

    一.背景 为了封禁某些爬虫或者恶意用户对服务器的请求,我们需要建立一个动态的 IP 黑名单.对于黑名单之内的 IP ,拒绝提供服务. 二.架构 实现 IP 黑名单的功能有很多途径: 1.在操作系统层面 ...

  8. 软件工程(FZU2015) 赛季得分榜，第七回合

    SE_FZU目录:1 2 3 4 5 6 7 8 9 10 11 12 13 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分: 团队项目分=团队得分+个人贡献分 个人贡献分: 个人 ...

  9. awk+sed编程

  10. 【学习总结】Git学习-参考廖雪峰老师教程四-时光机穿梭

    学习总结之Git学习-总 目录: 一.Git简介 二.安装Git 三.创建版本库 四.时光机穿梭 五.远程仓库 六.分支管理 七.标签管理 八.使用GitHub 九.使用码云 十.自定义Git 期末总 ...