<!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. Spring MVC 5 + Thymeleaf 基于Java配置和注解配置

    Spring MVC 5 + Thymeleaf 注解配置 Spring的配置方式一般为两种:XML配置和注解配置 Spring从3.0开始以后,推荐使用注解配置,这两种配置的优缺点说的人很多,我就不 ...

  2. Chrome开发者工具应对页面跳转页面点击事件等实用干货

    1.如何解决页面跳转 打开Preserve log即可 禁用页面缓存在右边的disable cache 2.如何监听页面点击 重要的是举一反三,看不懂英文去翻译!Mouse鼠标,click点击,,,, ...

  3. logstash安装及基础入门

    Logstash是一款开源的数据收集引擎,具备实时管道处理能力.简单来说,logstash作为数据源与数据存储分析工具之间的桥梁,结合 ElasticSearch以及Kibana,能够极大方便数据的处 ...

  4. H5 21-属性选择器下

    21-属性选择器下 --> <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. ACM-ICPC 2018 沈阳赛区网络预赛-I模拟题啊！！！

    垃圾题,题目巨TM长...这题题意就是说给你一个16进制串,让你把每一位转成长度为4的2进制数,并把这些数连接起来,连接完成后,进行奇偶校验,把字符串切割成每个长度为9的字符串,然后计算前8位的 1的 ...

  6. 03-HTML之body标签

    body标签 HTML标签按作用主要分为两类:字体标签和排版标签 HTML标签按级别主要分为两类:文本级标签和容器级标签 文本级标签:p.span.a.b.i.u.em.文本标签里只能放文字.图片.表 ...

  7. 关于对于system函数和c++标准下的新的变量定义方式{}

  8. Springboot+Redis 配置和使用

    pom.xml 引入redis 开启缓存 <!-- cache --> <dependency> <groupId>org.springframework.boot ...

  9. Django组件之认证系统

      Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Dja ...

  10. JDBC+Servlet+JSP的学生案例增删改查

    数据库信息传输到页面实现. 先进行学生信息页面展示: 接口IStudentDao public interface IStudentDao { /** * 保存操作 * @param stu 学生对象 ...