<!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. mvc学习（二）

    1.后台foreach 与 html的关系 <table border="1">@for (var i = 0; i < 10; i++){@Html.Raw(i ...

  2. mysql在同一个表上查询和更新

  3. SQL INSERT INTO 语句

    SQL Order By SQL update INSERT INTO 语句 INSERT INTO 语句用于向表格中插入新的行. 语法 INSERT INTO 表名称 VALUES (值1, 值2, ...

  4. 在mvc中实现图片验证码的刷新

    首先,在项目模型(Model)层中建立一个生成图片验证码的类ValidationCodeHelper,代码如下: public class ValidationCodeHelper { //用户存取验 ...

  5. GIT 配置管理

    git版本控制开发流程小结笔记(一) 收藏                                                                     何良瑞Nyanko君 ...

  6. SSM框架-----------SpringMVC+Spring+Mybatis框架整合详细教程

    1.基本概念 1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One  ...

  7. js 斐波那契数列（兔子问题）

    对于JS初学者来说,斐波那契数列一直是个头疼的问题,总是理不清思路. 希望看完这篇文章之后会对你有帮助. 什么是斐波那契数列 : 答: 斐波那契数列,又称黄金分割数列.因数学家列昂纳多·斐波那契(Le ...

  8. js隐式转换

    JavaScript的数据类型分为六种,分别为null,undefined,boolean,string,number,object.object是引用类型,其它的五种是基本类型或者是原始类型.我们可 ...

  9. position

    1.父集设置了relative,子集的absolute要设置top和left的值,不然父集的padding值会影响到子集的位置: #first{ width: 200px; height: 100px ...

  10. kindEditor完整认识 PHP上调用并上传图片说明/////////////////////////////z

      最近又重新捣鼓了下kindeditor,之前写的一篇文章http://hi.baidu.com/yanghbmail/blog/item/c681be015755160b1d9583e7.html ...