<!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. [Leetcode]006. ZigZag Conversion

    public class Solution { public String convert(String s, int nRows) { if (s == null || s.isEmpty() || ...

  2. 分析师分析业务维度，（个人制作分析思维导图Xmind）

    个人在咨询公司做过分析师(分析师必须懂运营),该咨询公司主要针对电商,零售 结合公司的搭建的CRM系统及报表体系,列了个分析师分析维度,搭建公司自己的BI系统 个人经验:分析师的分析思维可以多看看艾瑞 ...

  3. TCP/IP三次握手与四次挥手的正确姿势

    0.史上最容易理解的:TCP三次握手,四次挥手 https://cloud.tencent.com/developer/news/257281 A 理解TCP/IP三次握手与四次挥手的正确姿势http ...

  4. JD孔_20160912

    1.买的 “航嘉(Huntkey)大白803 8位3米 总控开关 防过载保护 插座/排插/拖”  http://item.jd.com/1786149.html#product-detail 2.

  5. 简单的dp(dp专题）

    题目链接:https://vjudge.net/contest/216347#problem/C   Alice gets two sequences A and B. A easy problem ...

  6. Hyperspace Travel

    https://www.hackerrank.com/contests/infinitum16-firsttimer/challenges/hyperspace-travel 给出n个点,是一个m维坐 ...

  7. Python3学习实例上手（1）-----模拟登录认证

    要求:输入用户名.密码进行认证,认证成功则欢迎,若输错三次会锁定最后一次输入的用户 知识点归纳:字典操作(items()方法).字符串操作(如strip().split()等).文件读写(for li ...

  8. 《C#高效编程》读书笔记12-使用推荐成员初始化器而不是赋值语句

    通常来说类都有不止一个构造函数.随着时间推移,成员变量的增加,构造函数的个数也会不断的增加.预防这种情况的最好方法是,在声明变量的时候就进行初始化,而不是在每个构造函数中进行. //初始化变量时声明 ...

  9. node线程有多少

    一篇文章构建你的 NodeJS 知识体系

  10. Devexpress之GridControl显示序列号

    先上图: 操作方法: 1.先设置一下gridview中属性:IndicatorWidth,一般为:40.如下图:(一般可以显示5位数字.如要更长显示,自己测试一下.) 2.找到gridview中的:C ...