<!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. .net排坑篇:负载均衡域名转发的背后

    背景 昨天因客户私有部署问题,需要到客户公司去排查问题. 他们是一家外企,各种权限需要提前申请(最大的坑).他们之前部署的一般为单域名,很少部署互联网类型多个域名的情形(第二个坑).这次私有部署总计使 ...

  2. 微信小程序支付异常：requestPayment:fail no permission

    今天在调试微信小程序支付时碰到了这个问题,支付参数都正常生成了,在调用 wx.requestPayment 进行支付时遇到了这个报错,查了一下发现是开发者工具中 AppID 写错了,用的 AppID ...

  3. Python-正则复习-56

    # 正则表达式# 字符组 [字符]# 元字符 # \w \d \s # \W \D \S # . 除了换行符以外的任意字符 # \n \t # \b # ^ $ 匹配字符串的开始和结束 # () 分组 ...

  4. 如何恢复Eclipse中被误删除的文件

    在使用Eclipse时,可能会不小心误删除一些文件,没关系,Eclipse有个非常强大的功能,能让这些误删除的文件恢复回来,下面就来介绍一下. 工具/原料   Eclipse Kepler 方法/步骤 ...

  5. jmeter之批量修改请求路径

    今天工作时碰到一个问题:测试环境中由于tomcat没指定webapps下的文件夹名,导致tomcat使用了webapps下默认的文件夹名,而我的jmeter脚本都已经做出来了,一共83个接口,挨个改路 ...

  6. 消除element.style { }

    1.在写前台页面时,我们会发现控制台里会自动出现一些样式覆盖掉我们定义的样式: 解决的办法: 把被覆盖的样式单独定义出来,并在样式后面加上 !important,表示高优先级.

  7. Mixing x86 with x64 code (混合编写x86和x64代码)

    几个月前我小小的研究了在WOW64下的32位进程中运行native x64代码. 第二个设想是在64位进程下运行x86代码.它们都是可以的,如我google的一样, 已经有人在使用这两种方法了: ht ...

  8. windows 内建环境变量

    PS C:\Windows> ls env: Name Value ---- ----- _NT_SYMBOL_PATH srv*C:\Users\vv\Documents\symbols AL ...

  9. js判断手机机型，然后进行相对应的操作

    我们通过浏览器内置的userAgent来判断手机机型. 具体代码如下: var u = navigator.userAgent, app = navigator.appVersion; if(/App ...

  10. C# 往Datatable中添加新行的步骤

    以一个实例说明 //录入年份绑定 public void YearList(FineUIPro.DropDownList ddlYear) { //年份从15年到当前年//起止年份 ; int yea ...