<!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. BZOJ 1500 [NOI2005]维修数列 FHQ Treap

    终于A了这题...这题还是很好...但是我太菜...重构了三遍qwq FHQ Treap大法好!qwq...~~ Ins:直接拿输入造一棵树,把原来的树split成[1,pos],[pos+1,n], ...

  2. Unittest组织用例的姿势

    本文我们将会讲解Python Unittest 里组织用例的5种姿势. 环境准备: python 3.0以上 python requests库 小编的环境: python 3.6.4 一.TestLo ...

  3. spring retry注解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  4. beeline连接hive

    beeline -u jdbc:hive2://192.168.1.77:10000 zeppelin default jdbc: jdbc:hive2://nn01.ooccpp.com:2181/ ...

  5. HDU 4622 Reincarnation Hash解法详解

    今天想学字符串hash是怎么弄的.就看到了这题模板题 http://acm.hdu.edu.cn/showproblem.php?pid=4622 刚开始当然不懂啦,然后就上网搜解法.很多都是什么后缀 ...

  6. Unity UGUI按钮添加点击事件

    1. 可视化创建及事件绑定 # 1 : 通过 Hierarchy 面板创建 UI > Button. 2 : 创建一个脚本 TestClick.cs, 定义了一个 Click 的 public ...

  7. ACdream 1430——SETI——————【后缀数组，不重叠重复子串个数】

    SETI Time Limit: 4000/2000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) Submit Statist ...

  8. C 碎片十 关键字&库函数

    一.关键字 1, sizeof sizeof关键字用于计算所占空间大小的 格式:sizeof(类型名/变量名); 2, typedef typedef关键字用于重命名数据类型的,相当于给原来的数据类型 ...

  9. TCP的连接和释放过程

    TCP的连接和释放过程 1.三次握手的过程 1)主机A向主机B发送TCP连接请求数据包,其中包含主机A的初始序列号seq(A)=x.(其中报文中同步标志位SYN=1,ACK=0,表示这是一个TCP连接 ...

  10. hibernate课程 初探单表映射2-1 hibernate进阶 本章简介

    本章简介,主要讲5大块的内容 1 hibernate.cfg.xml的配置 2 session 的简介 3 transaction的简介 4 session的详解 5 对象关系映射常用配置