<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

   <style>

        .hide{

            display: none;

        }

        .menu{

            height: 38px;

            background-color: #eeeeee;

            line-height: 38px;

        }

        .active{

            background-color: brown;

        }

        .menu .menu-item{

            float: left;

            border-right: 1px solid red;

            padding: 0 5px;

            cursor: pointer;

        }

        .content{

            min-height: 100px;

            border: 1px solid #eeeeee;

        }

    </style>

</head>

<body>

  <div style="width: 700px;margin:0 auto">

        <div class="menu">

            <div  class="menu-item active" >菜单一</div>

            <div  class="menu-item" >菜单二</div>

            <div  class="menu-item" >菜单三</div>

        </div>

        <div class="content">

            <div >内容一</div>

            <div class="hide" >内容二</div>

            <div class="hide">内容三</div>

        </div>

    </div>

<script src="jquery-1.12.4.js"></script>

<script>

       $('.menu-item').click(function () {

         $(this).addClass('active').siblings().removeClass('active');

//           var res=$(this).index()

//           var tes=$('.content').children(res)

//           console.log(tes)

//           获取索引位置

           $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');

    });

</script>

</body>

</html>

模态编程框

python：模态编程框的更多相关文章

  1. Python CGI编程(转自易百)

    Python CGI编程 Python的CGI编程,公共网关接口或CGI,Web服务器和一个自定义的脚本之间交换信息是一组定义的标准.     什么是CGI ? 公共网关接口或CGI,Web服务器和一 ...

  2. 深入理解 Python 异步编程(上)

    http://python.jobbole.com/88291/ 前言 很多朋友对异步编程都处于"听说很强大"的认知状态.鲜有在生产项目中使用它.而使用它的同学,则大多数都停留在知 ...

  3. Python GUI 编程

    Python GUI编程(Tkinter) Python 提供了多个图形开发界面的库,几个常用 Python GUI 库如下: Tkinter: Tkinter 模块(Tk 接口)是 Python 的 ...

  4. Python GUI编程(Tkinter) windows界面开发

    Python实现GUI简单的来说可以调用Tkinter库,这样一般的需求都可以实现,显示简单的windows窗口代码如下: python_gui.py 1 #!C:\Python27\python.e ...

  5. python GUI编程tkinter示例之目录树遍历工具

    摘录 python核心编程 本节我们将展示一个中级的tkinter应用实例,这个应用是一个目录树遍历工具:它会从当前目录开始,提供一个文件列表,双击列表中任意的其他目录,就会使得工具切换到新目录中,用 ...

  6. Python网络编程之网络基础

    Python网络编程之网络基础 目录 Python网络编程之网络基础 1. 计算机网络发展 1.1. OSI七层模型 1.2. 七层模型传输数据过程 2. TCP/IP协议栈 2.1 TCP/IP和O ...

  7. Python Socket 编程——聊天室示例程序

    上一篇 我们学习了简单的 Python TCP Socket 编程,通过分别写服务端和客户端的代码了解基本的 Python Socket 编程模型.本文再通过一个例子来加强一下对 Socket 编程的 ...

  8. python多线程编程

    Python多线程编程中常用方法: 1.join()方法:如果一个线程或者在函数执行的过程中调用另一个线程,并且希望待其完成操作后才能执行,那么在调用线程的时就可以使用被调线程的join方法join( ...

  9. python 面向对象编程学习

    1. 问题:将所有代码放入一个py文件:无法维护 方案:如果将代码才分放到多个py文件,好处: 1. 同一个名字的变量互相不影响 2.易于维护 3.引用模块: import module 2.包:解决 ...

随机推荐

  1. JAVA继承与覆写

    实例:数组操作 首先是开发一个整型数组父类,要求从外部控制数组长度,并实现保存数据以及输出.然后子类中实现排序和反转. 基础父类代码如下: class Array { private int data ...

  2. 关于C#使用Dllimport 导入vc++动态库后网站部署提示 “无法加载 DLL，找不到指定模块”的解决方法。

    这次项目需要,做了一个C#写的WebService服务给外部调用,服务内部引用了算法库,本地调试已经通过,现场部署服务时各种提示找不到DLL文件. 第一.如果是包含有32位库在64位服务器系统上运行, ...

  3. 解决Rational Rose 中 没有 Data modeler 选项的问题

    在  Rose  没有 Data modeler 选项的原因是没有将 Data modeler 这块功能勾选上. 解决方案: 菜单栏--Add-Ins--Add-Ins Manager-->找到 ...

  4. 在四合院里写code是什么体验（非拉仇恨）

    我工作的地点在一个幽静的四合院,后海边上.每次出了地铁还要走长长的十分钟的胡同,经过恬静的老人,嬉戏的小孩,还有就是长年不缺的游客.很多次,在夕阳将下未下时五六点的时候,小胡同里老人拿着小马扎,一群小 ...

  5. anjularjs常用的内置方法

    1.$apply anjularjs通过$apply方法去执行脏检查,及时告诉model绑定变量更新. 示例:定义一个date变量显示在页面上,它的控制器是firstCtrl,这个date变量有一个时 ...

  6. JMeter学习-031-JMeter 3.0 POST Body Data 中文乱码问题

    今天,朋友将 JMeter 的版本由 2.13 升级到了 3.0 发现之前接口脚本 POST 请求主体中的中文无法正确显示,现象如下图所示:

  7. LeetCode Counting Bits

    原题链接在这里:https://leetcode.com/problems/counting-bits/ 题目: Given a non negative integer number num. Fo ...

  8. Oracle 索引创建、表分区

    --EAF_WORKFLOWSTEP 表创建 CREATE TABLE EAF_WORKFLOWSTEP ( ) NOT NULL PRIMARY KEY USING INDEX TABLESPACE ...

  9. scipy科学计算库

    特定函数 例贝塞尔函数: 积分 quad,dblquad,tplquad对应单重积分,双重积分,三重积分 from scipy.integrate import quad,dblquad,tplqua ...

  10. OpenCV整体的模块架构

    之前啃了不少OpenCV的官方文档,发现如果了解了一些OpenCV整体的模块架构后,再重点学习自己感兴趣的部分的话,就会有一览众山小的感觉,于是,就决定写出这篇文章,作为启程OpenCV系列博文的第二 ...