<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .menu{

            min-height: 50px;

            background-color: #eeeeee;

            line-height: 50px;/*设置文字居中*/

        }

        .menu-item{

            float: left;

            border-right: 1px solid aquamarine; /*在右侧加上一道竖线*/

            padding: 0 50px; /*上下间距不变，左右间距50px*/

            cursor: pointer; /*鼠标移动上去出现小手的标志*/

        }

        .active{

            background-color: #ff3955;

        }

        .content{

            min-height: 300px;

            border: 1px solid #eeeeee;

        }

    </style>

</head>

<body>

<div style="width: 900px;margin: 0 auto">

    <div class="menu">

        <div class="menu-item active" a="1">菜单一</div>

        <div class="menu-item" a="2">菜单二</div>

        <div class="menu-item" a="3">菜单三</div>

    </div>

    <div class="content">

        <div b="1">内容一</div>

        <div b="2"class="hide">内容二</div>

        <div b="3"class="hide">内容三</div>

    </div>

</div>

<script src="jquery-1.12.4.js"></script>

<script>

    $('.menu-item').click(function () {

        // 找到受点击标签给他添加active样式，再找到它的兄弟标签，去除avtive样式

        $(this).addClass('active').siblings().removeClass('active');

        // 拿到受点击的标签的a的值

        //var target = $(this).attr('a')

        //在拥有conetet标签的子标签中找b的值等于a的值的标签，找到后去除它的hide样式，

        // 然后找去除样式的标签的兄弟标签给他们加上hide样式

        //$('.content').children('[b="'+target+'"]').removeClass('hide').siblings().addClass('hide')
//下面这种方法是用索引去做操作同样完成了上面的操作 而且代码简洁
var v = $(this).index()//获取索引
//eq() 选择器选取带有指定 index 值的元素
$('.content').children().eq(v).removeClass('hide').siblings().addClass('hide')
}) </script> </body> </html>

效果如下图：

tab菜单的点击的动态效果和内容页面的关联显示jQuery的更多相关文章

  1. 8款超酷实用的CSS3 Tab菜单集合

    1.CSS3华丽的Tab菜单 带小图标动画 之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG Tab滑块菜单,结合SVG,Tab菜单实现非常灵活.今天我们要再来分享一款基于CSS3的 ...

  2. 简易版CSS3 Tab菜单 实用的Tab切换

    今天我们要来分享一款非常简易而又实用的CSS3 Tab菜单,Tab菜单没有非常华丽的动画,但是代码非常简洁易懂,也可以在大部分场合使用,因此也非常实用,如果你需要加入动画效果,也可以自己方便地修改这款 ...

  3. 简易CSS3 Tab菜单 Tab切换滑块动画

    今天要分享一款简易的CSS3 Tab菜单,这款Tab菜单在切换的时候内容块出现飞入飞出的动画效果,尽管看起来非常简单,但是你完全可以在上面定制自己喜欢的Tab菜单.前面也分享过一些Tab菜单,像CSS ...

  4. 微信公众号菜单openid 点击菜单即可打开并登录微站

    现在大部分微站都通过用户的微信openid来实现自动登录.在我之前的开发中,用户通过点击一个菜单,公众号返回一个图文,用户点击这个图文才可以自动登录微站.但是如果你拥有高级接口,就可以实现点击菜单,打 ...

  5. 打造简易可扩展的jQuery/CSS3 Tab菜单

    原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜 ...

  6. zepto.js swipe实现触屏tab菜单

    今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功 ...

  7. 两种方法实现TAB菜单及文件操作

    1,自定义属性的方法实现----TAB菜单操作 cursor:pointer; 鼠标的小手 <!DOCTYPE html> <html lang="en"> ...

  8. jq自定义下拉菜单，在点击非当前下拉菜单区域时，关闭下拉菜单（点击事件的对象不是目标元素本身）

    jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...

  9. 织梦一二级导航菜单被点击顶级栏目高亮(加class)解决方法

    织梦一二级导航菜单被点击的栏目高亮显示方法详解,废话不多说直接举例说明: 织梦一级菜单被点击栏目高亮调用方法: {dede:channel typeid ='1'  type ='son' curre ...

随机推荐

  1. 自动化测试 - Appium + Python史上最全最简环境搭建步骤

    一,为什么是Appium借一张图: 1.1 Appium优点 l  开源 l  跨架构:NativeApp.Hybird App.Web App l  跨设备:Android.iOS.Firefox ...

  2. UiAutomator环境配置

    前提:下载jdk以及adt 一.配置java开发环境 1.新建系统变量 -——变量名:JAVA_HOME      变量值:C:\Program Files\Java\jdk1.7.0_80 2.编辑 ...

  3. Python 魔术方法及调用方式

    魔术方法 调用方式 解释 __new__(cls [,...]) instance = MyClass(arg1, arg2) __new__ 在创建实例的时候被调用 __init__(self [, ...

  4. Spark Mllib里的协调过滤的概念和实现步骤、LS、ALS的原理、ALS算法优化过程的推导、隐式反馈和ALS-WR算法

    不多说,直接上干货! 常见的推荐算法 1.基于关系规则的推荐 2.基于内容的推荐 3.人口统计式的推荐 4.协调过滤式的推荐 (广泛采用) 协调过滤的概念 在现今的推荐技术和算法中,最被大家广泛认可和 ...

  5. EditPlus常用操作

    EditPlus注册码在线生成 http://www.jb51.net/tools/editplus/ 随意填写个用户名,生成对应的密码就可以使用editplus了 EditPlus常用快捷键 编代码 ...

  6. The program 'unzip' is currently not installed. You can install it by typing:

    linux解压遇到下面问题: The program 'unzip' is currently not installed. You can install it by typing: sudo ap ...

  7. ServiceStack.Redis 使用

    Redis官网提供了很多开源的C#客户端.例如,Nhiredis ,ServiceStack.Redis ,StackExchange.Redis等.其中ServiceStack.Redis应该算是比 ...

  8. 【java】Cookie购物车实现

    前言 一个基于Cookie的购物车实现 话不多说,直接上代码 导包 import java.net.URLDecoder; import java.util.ArrayList; import jav ...

  9. JSP中，EL表达式向session中取出一个attribute和JSP脚本访问session取出一个attribute，写法有何不同？(转自百度知道)

    EL表达式使用起来会更简洁,假如session中有一个属性A(attrA),那么EL和jsp脚本取值的方式如下: EL表达式:${ sessionScope.attrA } JSP脚本:<%=s ...

  10. 菜鸟 学注册机编写之 “RSA”

    测试环境  系统: xp sp3 调试器 :od 1.10 RSA简单介绍 选取两个别人不知道的大素数p, q. 公共模n = p*q 欧拉值φ(n) = (p-1)(q-1) 选取公匙(加密匙) e ...