<!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
原文地址：https://www.cnblogs.com/topzhao/p/9222276.html