<!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. python2.x与3.x差别

    数字常量: 八进制 十六进制 二进制 2:0177 0o177   0x9ff 0b101010 3:0o177 0x9ff 0b101010 多种字符串: 2:一般字符串,Unicode字符串 3: ...

  2. 《UML大战需求分析》阅读笔记04

    在学习了前面的几种UML图并不能满足所有情况的建模,如当流程图涉及到多种角色,并且通过对多种角色交互展开时,顺序图才是不二选择.顺序图就如同中文语法的说话语言相似,描述的是一种事件发生的顺序.顺序图分 ...

  3. requirejs代码结构分析

    一.函数入口函数. req = requirejs = function (deps, callback, errback, optional) { //Find the right context, ...

  4. requirejs使用

    实现模块化.按需加载. 一.配置参数. 1.baseUrl:以一个相对于baseUrl的地址来加载所有的代码.   data-main,使用它来启动脚本加载过程,而baseUrl一般设置到与该属性相一 ...

  5. 给Source Insight做个外挂系列之五－－Insight “TabSiPlus”

    “TabSiPlus 外挂插件”主要有两部分组成,分别是“外挂插件加载器”和“插件动态库”.“插件动态库”完成Source Insight窗口的Hook,显示Tab标签栏,截获Source Insig ...

  6. Ubuntu 14.04 编译安装 husky

    简介 Husky是一个大数据分布式开发框架,用C++开发,因为粗粒度(coarse-grained)平台(如Spark,Hadoop,Flink)MR耗时太大,然后细粒度(fine-grained)平 ...

  7. OC----面向对象

    创建一个类 comm+n 实例变量的可见度 @public,@protect@private @public  // 共有的,在类的内部和外部都可以进行访问 @protected   // 受保护的, ...

  8. swift：谈谈swift几种常见属性的区别

    一.前奏 Swift作为一门新语言,经过几年的发展,逐渐趋于完善,目前已经更新到3.0版本,它汇集许多其他语言的特点,例如JS.Paython.C++等,完全区别于OC.个人感觉它没有完全的OOP和O ...

  9. 第四篇：白话tornado源码之褪去模板外衣的前戏

    加班程序员最辛苦,来张图醒醒脑吧! ... ... ... 好了,醒醒吧,回归现实看代码了!! 执行字符串表示的函数,并为该函数提供全局变量 本篇的内容从题目中就可以看出来,就是为之后剖析tornad ...

  10. ASP.NET TextBox 当鼠标点击后清空默认提示文字[转]

    前台文本框里添加下面2个事件属性: OnFocus="javascript:if(this.value=='提示文字') {this.value=''}" OnBlur=" ...