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>

效果如下图：

转载于:https://www.cnblogs.com/topzhao/p/9222276.html

tab菜单的点击的动态效果和内容页面的关联显示jQuery相关推荐

JQuery Tab菜单的实现
2019独角兽企业重金招聘Python工程师标准>>> 一个tab面板 <div id="tab"> <div class="menu ...
android tab切换菜单内容分页,8月23号 Tab菜单页面切换和jsp分页查询
android ViewPager实现App主界面Tab菜单页面切换和点击事件首先需要创建3个.xml文件,简单设置背景和一些简单组件,tab1.xml,tab2.xml,tab3.xml 之后是对 ...
html页面 tab JS滑动切换,JS+CSS实现滑动切换tab菜单效果
本文实例讲述了JS+CSS实现滑动切换tab菜单效果.分享给大家供大家参考.具体如下: 这是风格简单的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标不需要点击,滑动门效果 ...
BOS项目02_02_zTree-通过ajax的获取菜单数据、监听树形菜单的点击事件、读取json文件、Ajax获取数据
系列文章目录文章目录系列文章目录前言一.发送ajax网络请求获取菜单数据二.监听树形菜单的点击事件总结前言一.发送ajax网络请求获取菜单数据我们现在的数是写死的,那么实际项目中我们 ...
html5 tab凸起,搭建中间凸起的Tab菜单结构
今年的双11又再一次刷新了记录,大家剁手做贡献了吗回到今天的主题,很多app底下的Tab菜单结构为了突出,中间的tab比两边的高. 思路使用FragmentTabHost搭建Tab菜单使用一张图 ...
day16-筛选器以及Tab菜单示例
一.前言之前我们学习dom写Tab菜单示例,今天我们来学习一下常用的筛选器和Tab菜单示例. 二.操作的html <head><meta charset="UTF-8&q ...
jQuery 分类导航菜单条点击变色
JQuery 分类导航菜单条点击变色,当点击导航菜单则当前点击选中导航菜单变色其它还原,依次类推. <script type="text/javascript" src=&q ...
html5 tab菜单切换页面,11个常用的jQuery TAB切换菜单源码及制作教程
11个常用的jQuery TAB切换菜单源码及制作教程 Sponsor TAB切换式菜单可以方便为我们减少很多网页布局空间,而且用jQuery的话可以加入一些动画效果,比如渐变,向左右滑动等,提升一定 ...
html上下滚动切换顶端tab,jQuery实现Tab菜单滚动切换的方法
本文实例讲述了jQuery实现Tab菜单滚动切换的方法.分享给大家供大家参考.具体如下: 这是一款jQuery实现让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起 ...

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

tab菜单的点击的动态效果和内容页面的关联显示jQuery相关推荐

最新文章

热门文章