<!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. 我选择了学Python

    我觉得选择了这个行业,技术不行不是最可怕的,但是要有这种意愿去改变,要有学习的上进心. 人生三件事很重要,第一.在关键时候自己的选择很重要,第二.找到自己的贵人很重要,第三.就是付诸行动去做很重要. ...

  2. aspnetcore配置log4net并添加全局异常处理

    第一步:在NuGet中引用log4net 第二步:创建log4net.config <?xml version="1.0" encoding="utf-8" ...

  3. Microsoft JDBC Driver 使用 getParameterMetaData 会报错？

    不知道为何使用 Microsoft JDBC Driver for SQL Server 驱动时,sql语句不带参数没有问题,但是如果带参数且使用 getParameterMetaData 就会提示某 ...

  4. Abp 添加阿里云短信发送

    ABP中有短信发送接口ISmsSender public interface ISmsSender { Task<string> SendAsync(string number, stri ...

  5. volatile底层原理详解

    今天我们聊聊volatile底层原理: Java语言规范对于volatile定义如下: Java编程语言允许线程访问共享变量,为了确保共享变量能够被准确和一致性地更新,线程应该确保通过排它锁单独获得这 ...

  6. php 转码函数 你还在用iconv吗？-- 解决sqlserver插入中文失败问题

    文章来源 :http://www.veryhuo.com/a/view/41348.html 这次给客户同步sqlserver数据,临时搭的 PHP Query Analyzer 插入某些中文一直有些 ...

  7. 框架使用-Sql拼接

     Sql语句拼写: 查询 DQueryDom DmoQuery(返回的整个对象) 更新 DQUpdateDom 删除 DQDeleteDom 条件 dom.Where.Conditions.Add(D ...

  8. 用代码学习TreeView控件

    private void Form1_Load(object sender,EventArgs e){ //游离对象 TreeNode tn=new TreeNode("我很好") ...

  9. springBoot jpa uuid生成策略

    实体类 import org.hibernate.annotations.GenericGenerator; import javax.persistence.*; @Entity @Table(na ...

  10. Unity3d 游戏中集成Firebase 统计和Admob广告最新中文教程

    之前写过俩相关的教程,最近发现插件官方更新了不少内容,所以也更新一篇Firebase Admob Unity3d插件的教程,希望能帮到大家. Firebase Admob Unity3d插件是一个Un ...