<!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. Scaffold your ASP.NET MVC 3 project with the MvcScaffolding package

    原文发布时间为:2011-05-21 -- 来源于本人的百度文章 [由搬家工具导入] http://blog.stevensanderson.com/2011/01/13/scaffold-your- ...

  2. 关于math头文件

    math.h是c语言里的 cmath是c++里的 fabs是对小数求绝对值 abs是对整数绝对值 用math.h里的abs对小数不能求绝对值- - fabs对小数取绝对值 abs是对整数 现在要对一个 ...

  3. 9.OpenStack安装web界面

    安装仪表板 安装仪表板组件 yum install -y openstack-dashboard httpd mod_wsgi memcached python-memcached 编辑/etc/op ...

  4. Spring：特殊数据类型的属性注入（基于配置文件）

    该处提到的特殊数据类型指的是除了基础数据类型和String以外的其他常用的数据类型,如:List.Map.Set.以及pojo对象等.则我们创建的Person类定义为: package bjtu.we ...

  5. （2）C语言 基础2

    一.函数 二.指针 1.指针是一个用来存储内存地址的变量. int * p ; 定义了一个指针变量p,p中存储的是一个地址,改地址里必定会存储一个int类型的数据. *号表示变量p是一个指针.*和指针 ...

  6. HDU 6271 Master of Connected Component（2017 CCPC 杭州 H题，树分块 + 并查集的撤销）

    题目链接  2017 CCPC Hangzhou Problem H 思路:对树进行分块.把第一棵树分成$\sqrt{n}$块,第二棵树也分成$\sqrt{n}$块.    分块的时候满足每个块是一个 ...

  7. AtCoder Grand Contest 012 B Splatter Painting （反向处理 + 记忆化）

    题目链接  agc012 Problem B 题意  给定一个$n$个点$m$条边的无向图,现在有$q$个操作.对距离$v$不超过$d$的所有点染色,颜色编号为$c$. 求每个点最后的颜色状态. 倒过 ...

  8. #417 Div2 E (树上阶梯博弈)

    #417 Div2 E 题意 给出一颗苹果树,设定所有叶子节点的深度全是奇数或偶数,并且包括根在内的所有节点上都有若干个苹果. 两人进行游戏,每回合每个人可以做下列两种操作中的一种: 每个人可以吃掉某 ...

  9. Trapping Rain Water (Bar Height) -- LeetCode

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  10. [BZOJ 1800] 飞行棋

    Link: BZOJ 1800 传送门 Solution: $O(n^4)$…… Code: #include <bits/stdc++.h> using namespace std; ] ...