<!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. 【ZOJ4062】Plants vs. Zombies（二分）

    题意:有n个植物排成一排,标号为1-n,每株植物有自己的生长速度ai,每对植物浇一次水,该株植物就长高ai, 现在机器人从第0个格子出发,每次走一步,不能停留,每一步浇一次水,总共可以走m步,问最矮的 ...

  2. sqlalchemy多表查询

    from datetime import datetime from sqlalchemy import Column,Integer,String,Boolean,DateTime,ForeignK ...

  3. android.useDeprecatedNdk=true

    android.useDeprecatedNdk=true ndk{ moduleName "aa" abiFilter "armeabi-v7a" }

  4. windows下利用线程池完成多任务的分配和运行

    在做项目的过程中有时候为了提升效率,用了多线程的方法来对任务进行分割和应用,后来发现,采用线程池的方法能更好的利用线程资源来计算任务,网上有很多关于如何运行线程池的例子,msdn上也给出了对应的例子: ...

  5. pymongo.errors.BulkWriteError错误排解

    在mongodb进行数据库操作的时候触发异常   pymongo Error: pymongo.errors.BulkWriteError: batch op errors occurred 这种问题 ...

  6. [BZOJ2442][Usaco2011 Open]修剪草坪 dp+单调队列优化

    2442: [Usaco2011 Open]修剪草坪 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1118  Solved: 569[Submit] ...

  7. js/jquery获取元素，元素筛选器

    1.js获取元素 var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 ...

  8. (4)C#变量,常量,数据类型,转义字符,数据类型转换

    一.变量 程序运行期间能够被改变的量称为变量. 变量名称要用小写字母开头,避免用下划线开头. 如果包含多个单词,从第二个单词开始首字母都要大写. 定义并初始化 double pi = 3.14 二.常 ...

  9. MySQL读写分离-架构

    MySQL读写分离-架构 简介 对于很多大型网站(pv值百万.千万)来说,在所处理的业务中,其中有70%的业务是查询(select)相关的业务操作(新闻网站,插入一条新闻.查询操作),剩下的则是写(i ...

  10. Buffer源码深入分析

    博客园对MarkDown显示的层次感不是很好,大家可以看这里:Buffeer. 本机环境: Linux 4.4.0-21-generic #37-Ubuntu SMP Mon Apr 18 18:33 ...