tab菜单的点击的动态效果和内容页面的关联显示jQuery
<!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的更多相关文章
- 8款超酷实用的CSS3 Tab菜单集合
1.CSS3华丽的Tab菜单 带小图标动画 之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG Tab滑块菜单,结合SVG,Tab菜单实现非常灵活.今天我们要再来分享一款基于CSS3的 ...
- 简易版CSS3 Tab菜单 实用的Tab切换
今天我们要来分享一款非常简易而又实用的CSS3 Tab菜单,Tab菜单没有非常华丽的动画,但是代码非常简洁易懂,也可以在大部分场合使用,因此也非常实用,如果你需要加入动画效果,也可以自己方便地修改这款 ...
- 简易CSS3 Tab菜单 Tab切换滑块动画
今天要分享一款简易的CSS3 Tab菜单,这款Tab菜单在切换的时候内容块出现飞入飞出的动画效果,尽管看起来非常简单,但是你完全可以在上面定制自己喜欢的Tab菜单.前面也分享过一些Tab菜单,像CSS ...
- 微信公众号菜单openid 点击菜单即可打开并登录微站
现在大部分微站都通过用户的微信openid来实现自动登录.在我之前的开发中,用户通过点击一个菜单,公众号返回一个图文,用户点击这个图文才可以自动登录微站.但是如果你拥有高级接口,就可以实现点击菜单,打 ...
- 打造简易可扩展的jQuery/CSS3 Tab菜单
原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜 ...
- zepto.js swipe实现触屏tab菜单
今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功 ...
- 两种方法实现TAB菜单及文件操作
1,自定义属性的方法实现----TAB菜单操作 cursor:pointer; 鼠标的小手 <!DOCTYPE html> <html lang="en"> ...
- jq自定义下拉菜单，在点击非当前下拉菜单区域时，关闭下拉菜单（点击事件的对象不是目标元素本身）
jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...
- 织梦一二级导航菜单被点击顶级栏目高亮(加class)解决方法
织梦一二级导航菜单被点击的栏目高亮显示方法详解,废话不多说直接举例说明: 织梦一级菜单被点击栏目高亮调用方法: {dede:channel typeid ='1' type ='son' curre ...
随机推荐
- 学霸笔记系列 - Python Selenium项目实战（一）—— 怎么去验证一个按钮是启用的（可点击）？
Q: 使用 Python Selenium WebDriver 怎么去验证一个按钮是启用的(可点击)? A:Selenium WebDriver API 里面给出了解决方法is_enabled() 使 ...
- OpenStack Weekly Meeting 2015.07.17
Reviews(Company) 1 Mirantis 11562 HP 1653 Huawei 15 Reviews(Persons) 1 Ekaterina Chernova ✻ 2852 Kir ...
- IDEA/Eclipse安装 Alibaba Java Coding Guidelines 插件
为了让开发者更加方便.并且达到快速规范代码格式的目的并实行起来,阿里巴巴基于<阿里巴巴Java开发规约>手册内容,研发了一套自动化的IDE检测插件(IDEA.Eclipse).它就是Ali ...
- Centos7搭建redis，同一服务器启动两个端口的redis
1.安装redis [1]下载安装包 #准备安装文件夹 mkdir /usr/local/soft/redis #进入文件夹 cd /usr/local/soft/redis #下载安装包 wget ...
- xcrun -sdk 选择
在将FFmpeg编译成IOS版的时候,接触到编译脚本的一段(删减了部分): for ARCH in $ARCHS do if [ "$ARCH" = "i386" ...
- Vmware 可用的激活码
4F207-8HJ1M-WZCP8-000N0-92Q6G 0A6Z5-8H1EJ-WZCL1-PK072-23DJG 0F0Q9-8F38L-RZXT9-4U054-ACW5F JA02E-09H4 ...
- LVS 集群工作原理
1. 集群:集群(cluster )就是一组计算机,它们作为一个整体向用户提供一组网络资源,单个计算机系统就是一个集群节点(node). 2. 集群种类: <1>. 负载均衡集群(Load ...
- shiro web环境初始化过程
在web工程中使用shiro的时候需要配置一个shiro的listenser(EnvironmentLoaderListener)和一个shiro的filter(ShiroFilter). liste ...
- 从github克隆内容到本地时权限问题
从github克隆内容到本地时权限问题
- 爬虫基础-http请求的基础知识
百度百科上这么介绍爬虫: 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本. 在开发爬虫时常用的工具:ch ...