<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.menu .menu-item{
float:left;
border-right: 1px solid;
}
.active{
background-color: green;
cursor: pointer;
}
</style>
</head>
<body>
<div style="width:500px;margin:0 auto;">
<div class='menu'>
<div class="menu-item active" mid='m1'>菜单一</div>
<div class="menu-item" mid='m2'>菜单二</div>
<div class="menu-item" mid='m3'>菜单三</div>
</div>
<div class="content">
<div class="" cid='m1'>内容1</div>
<div class="hide" cid='m2'>内容2</div>
<div class="hide" cid='m3'>内容3</div>
</div>
</div>
<script src="jquery-2.1.4.min.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.content').children('[cid="'+$(this).attr('mid')+'"]').removeClass('hide').siblings().addClass('hide');
})
</script>
</body>
</html>

tab menu的更多相关文章

  1. iOS - Frame 项目架构

    前言 iOS 常见的几种架构: 标签式 Tab Menu 列表式 List Menu 抽屉式 Drawer 瀑布式 Waterfall 跳板式 Springborad 陈列馆式 Gallery 旋转木 ...

  2. iOS - Project 项目

    1.项目流程 1.1 分析项目的架构 iOS 常见的几种架构 标签式 Tab Menu 列表式 List Menu 抽屉式 Drawer 瀑布式 Waterfall 跳板式 Springborad 陈 ...

  3. Android界面布局基本属性

    在 android 中我们常用的布局方式有这么几种:1.LinearLayout ( 线性布局 ) :(里面只可以有一个控件,并且不能设计这个控件的位置,控件会放到左上角)              ...

  4. android 界面布局 很好的一篇总结[转]

    1.LinearLayout ( 线性布局 ) :(里面只可以有一个控件,并且不能设计这个控件的位置,控件会放到左上角) 线性布局分为水平线性和垂直线性二者的属性分别为:android:orienta ...

  5. 酷狗、QQ、天天动听——手机音乐播放器竞品对比

    如果说什么艺术与人们生活最贴近,那应该属音乐了,因此当代人不离身的手机里必然会有自己喜欢的音乐播放器APP存在. 在当今无论PC端还是手机端音乐播放器都越来越同质化,我们应该选择哪款手机音乐播放器?它 ...

  6. Tabs - 选项卡插件

        接上篇Tabs  - 选项卡插件  其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充          9)Flipping C ...

  7. TabHost用法

    tabhost用两种方法 方法一:Activity继承TabActivity后用getTabHost()方法来获取tabhost(前提:Activity的setContentView要删除,这样布局才 ...

  8. 36个让人惊讶的 CSS3 动画效果演示【转】

    本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支 ...

  9. 转：35个让人惊讶的 CSS3 动画效果演示

    本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支 ...

随机推荐

  1. webpack最佳入门实践系列(3)

    6.使用图片 6.1.尝试在css中引入图片 在src目录下新建css文件夹,并且在css文件夹下创建app.css文件,在src目录下新建images文件夹,放入一张图片,在app.css中引入这张 ...

  2. 从Jetty、Tomcat和Mina中提炼NIO构架网络服务器的经典模式

    如何正确使用NIO来构架网络服务器一直是最近思考的一个问题,于是乎分析了一下Jetty.Tomcat和Mina有关NIO的源码,发现大伙都基于类似的方式,我感觉这应该算是NIO构架网络服务器的经典模式 ...

  3. .com和.cn域名的区别所在，各个域名后缀含义

    很多人在注册域名的时候不明白域名后缀的含义,在这里就介绍两种最为常用的域名,介绍下他们的区别以及适用的范围.需要先查询是否被注册,我们经常去的就是西部数据和万网,查询并注册未被注册的域名,一般无论是什 ...

  4. webservice跨域文件，好多年前的东西，远程调用,js服务器端使用，可以远程调用

    1.clientaccesspolicy.xml <?xml version="1.0" encoding="utf-8" ?> <acces ...

  5. 百度经验：Win10查看已存储WiFi密码的两种方法

    方法一:网络和共享中心查询 具体步骤可以参考:Win10查看WIFI密码的方法 方法二:命令提示符查询 1.右键单击开始按钮,选择“命令提示符(管理员)” 2.输入如下命令(下图①号命令): nets ...

  6. 解决_CRT_SECURE_NO_WARNINGS 警告

    问题:我们在程序中使用fopen等CRT函数,就会出现一些警告信息,很烦人,如下: 1>e:/project/htt/ishow/functions.cpp(156) : warning C49 ...

  7. Python’s super() considered super!

    如果你没有被Python的super()惊愕过,那么要么是你不了解它的威力,要么就是你不知道如何高效地使用它. 有许多介绍super()的文章,这一篇与其它文章的不同之处在于: 提供了实例 阐述了它的 ...

  8. 最近看点JAVA

    这本的书名:<求精要决:JAVA EE编程开发安全精解> 请得很懂 试一下servlet代码: <!DOCTYPE html> <html> <head> ...

  9. POJ 2886.Who Gets the Most Candies? -线段树(单点更新、类约瑟夫问题)

    线段树可真有意思呢续集2... 区间成段的替换和增减,以及区间求和等,其中夹杂着一些神奇的操作,数据离散化,简单hash,区间异或,还需要带着脑子来写题. 有的题目对数据的操作并不是直接按照题面意思进 ...

  10. (转载)管道命令和xargs的区别(经典解释)

    一直弄不懂,管道不就是把前一个命令的结果作为参数给下一个命令吗,那在 | 后面加不加xargs有什么区别 NewUserFF 写道:懒蜗牛Gentoo 写道:管道是实现“将前面的标准输出作为后面的标准 ...