<!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. 利用navicat创建存储过程、触发器和使用游标的简单实例

    利用navicat创建存储过程.触发器和使用游标的简单实例 标签: navicat存储过程触发器mysql游标 2013-08-03 21:34 15516人阅读 评论(1) 收藏 举报  分类: 数 ...

  2. The MESI Protocol

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION To provide cache cons ...

  3. IOS 绘图教程Quartz2D

    http://www.cocoachina.com/industry/20140115/7703.html http://www.cnblogs.com/wendingding/p/3803020.h ...

  4. js按键监听

    //回车键监听 function keypressed(){ if(event.keyCode == 13) { doAction(); } } document.onkeydown = keypre ...

  5. TortoiseGit安装详解

    一:写该文章目的 最近换了一份新工作,新公司的源码管理都是使用GIT,习惯了之前的TFS和SVN进行项目源码管理和团队开发,第一次使用GIT进行团队开发和源码管理,颇有一些不习惯,花了一天时间终于把G ...

  6. AngularJS基础知识2

    一.angularJS双向数据绑定 利用双向数据绑定,不仅能把数据模型的变化同步到视图上面,还可以利用双向数据绑定的特性来做一些样式上面的控制. 双向数据绑定用处很多,不仅仅是像知识点1中的那个例子, ...

  7. Java语言程序设计(基础篇) 第三章 选择

    第三章 选择 3.8 计算身体质量指数 package com.chapter3; import java.util.Scanner; public class ComputeAndInterpret ...

  8. linux下普通用户如何使用80端口启动程序

    linux下普通用户如何使用80端口启动程序 http://blog.csdn.net/shootyou/article/details/6750230 大家都知道默认情况下linux的1024以下端 ...

  9. CentOS 7使用nmcli配置双网卡聚合

    进入CentOS 7以后,网络方面变化比较大,例如eth0不见了,ifconfig不见了,其原因是网络服务全部都由NetworkManager管理了,下面记录下今天下午用nmcli配置的网卡聚合,网络 ...

  10. could not deduce template argument for 'const std::_Tree<_Traits> &' from 'const std::string'

    VS2008, 写一个简单的demo的时候出现了这个: 1>------ Build started: Project: GetExportTable, Configuration: Relea ...