<!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. Maven的porfile与SpringBoot的profile结合使用详解

        使用maven的profile功能,我们可以实现多环境配置文件的动态切换,可参考我的上一篇博客.但随着SpringBoot项目越来越火,越来越多人喜欢用SpringBoot的profile功能 ...

  2. 【机器学习】SKlearn + XGBoost 预测 Titanic 乘客幸存

    Titanic 数据集是从 kaggle下载的,下载地址:https://www.kaggle.com/c/titanic/data 数据一共又3个文件,分别是:train.csv,test.csv, ...

  3. 分布式事务框架Seata及EasyTransaction架构的比对思考

    本文将会对比Seata与EasyTransaction两个分布式事务的一些高层设计,相信大家会有收获. Seata的概述 Seata(曾用名Fescar,开源版本GTS)是阿里的开源分布式事务框架,其 ...

  4. iptables防火墙规则的添加、删除、修改、保存

    原文地址:https://blog.csdn.net/educast/article/details/52093390 本文介绍iptables这个Linux下最强大的防火墙工具,包括配置iptabl ...

  5. Python_每日习题_0004_一年中的第几天

    # 题目 输入某年某月某日,判断这一天是这一年的第几天? # 程序分析 特殊情况,闰年时需考虑二月多加一天: def isLeapYear(y): return (y%400==0 or (y%4== ...

  6. 阿里云服务器使用镜像市场上的环境以后sql不能远程问题

    关于阿里云的服务器,首先要说的就是买了以后是没有环境的,什么都需要自己配置,也是在这个上面栽了很多跟头最后去的镜像市场买的一个IIS8+SQL2016的asp.net环境 怎么说呢,感觉有些问题的本源 ...

  7. 【Python3练习题 009】 打印出所有的“水仙花数”

    # [Python练习题 009] 打印出所有的“水仙花数”,所谓“水仙花数”是指一个三位数,# 其各位数字立方和等于该数本身.例如:153是一个“水仙花数”,# 因为153=1的三次方+5的三次方+ ...

  8. java 工厂模式 转载

    下面介绍三种设计模式,简单工厂模式,工厂方法模式,抽象工厂模式 思考如下场景: 有一天,林同学准备去买笔记本,他到商城发现有两款电脑他特别喜欢, 一款是 Macbook Pro, 另一款是 Surfa ...

  9. [日志]SAP S/4 HANA 启动与关闭的顺序

    注意 如果是非正式版的话 修改了日期了  需要重启一下应用和数据库才可以, S/4 HANA 启动步骤 先启动HANA: 在终端里输入 su - hdbadm HDB start 再启动S4 su - ...

  10. [转帖]Oracle 裁员史：技术人死于重组，卒于云计算

    Oracle 裁员史:技术人死于重组,卒于云计算 https://www.infoq.cn/article/tm-mcdHCPCI4eEwr6dbY 大厂裁员 我妈妈也总担心我没工作了 怎么还房贷 田 ...