<!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. tomcat + apache 动静分离

    原文地址:http://blog.csdn.net/gengv/article/details/5739438 从网上查了不少资料,想了解一下如何整合Apache和Tomcat,以便让Apache的h ...

  2. 简单粗暴！解决锐捷强制关闭VMware NAT Service的问题(图文教程)

    众所周知毒瘤的锐捷会定时强制关闭NAT服务,导致虚拟机连不上网,进而你的虚拟机就成了孤儿,只能玩单机. 在一番百度后,得到了一种神仙破解办法.原理是把锐捷关闭服务时所用的搜索关键字改掉,这样锐捷就搜不 ...

  3. 杭电oj2047-2049、2051-2053、2056、2058

    2047  阿牛的EOF牛肉串 #include<stdio.h> int main(){ int n,i; _int64 s[]; while(~scanf("%d" ...

  4. NS_AVAILABLE_IOS(6_0)

    http://www.cocoachina.com/bbs/read.php?tid=241951 一个简单的小问题,请诸位大侠帮助给看看 ,新手 ,勿拍砖       本帖属于CocoaChina会 ...

  5. grep and regular expression --- ^ . *

    "^" : Start of Line anchor "." : Matches any single character except the newline ...

  6. ubuntu16下安装telnet和opensshserver

    安装了虚拟机,使用的是ubuntu 16,server版本. 启动后发现没有telnet和ssh,就安装了(netstat -a|grep telnet). apt-get install openb ...

  7. mongodb简单安装

    参考文档: http://www.cnblogs.com/hanyinglong/archive/2016/07/21/5690611.html conf文件: dbpath = /usr/local ...

  8. Netty源码学习（三）NioEventLoop

    0. NioEventLoop简介 NioEventLoop如同它的名字,它是一个无限循环(Loop),在循环中不断处理接收到的事件(Event) 在Reactor模型中,NioEventLoop就是 ...

  9. HDU 2639 Bone Collector II【01背包 + 第K大价值】

    The title of this problem is familiar,isn't it?yeah,if you had took part in the "Rookie Cup&quo ...

  10. HDU 1426 Sudoku Killer(搜索)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1426 题意很明确,让你解一个9*9的数独. DFS即可. #include <cstdio> ...