jQuery 之 tab切换菜单(index索引版本)jQuery 之 tab切换菜单(index索引版本),原理：为

`<!DOCTYPE html>`
`<html lang="en">`
`<head>`
`<meta charset="UTF-8">`
`<title>Title</title>`
`<script src="jquery3.js"></script>`
`<style>`
`.menu{`
`height: 38px;`
`background-color: #eeeeee;`
`line-height: 38px;`
`}`
`.menu .menu-item{`
`float: left;`
`border-right: 1px solid red;`
`padding: 0 10px;`
`cursor: pointer;`
`}`
`.content{`
`min-height: 100px;`
`border:2px solid #eeeeee;`
`}`
`.hide{`
`display: none;`
`}`
`.active{`
`background-color: #428bca;`
`}`
`</style>`
`</head>`
`<body>`
`<div style="width: 700px;margin: 0 auto">`
`<div class="menu">`
`<div class="menu-item active">菜单一</div>`
`<div class="menu-item">菜单二</div>`
`<div class="menu-item">菜单三</div>`
`</div>`
`<div class="content">`
`<div>内容一</div>`
`<div class="hide">内容二</div>`
`<div class="hide">内容三</div>`
`</div>`
`</div>`
`<script>`
`$(".menu-item").click(function () {`
`//为当触发的标签添加active css`
`$(this).addClass('active')`
`//为当前触发标签的兄弟标签删除active css`
`$(this).siblings().removeClass('active')`
`//找到当前触发标签的索引位置值，如0，1，2`
`var v = $(this).index();`
`//根据标签索引位置值在内容菜单里查找位置也是等于v的标签，然后删除hide，再把兄弟标签添加hide`
`$('.content').children().eq(v).removeClass('hide').siblings().addClass('hide')`
``
`})`
`</script>`
`</body>`
`</html>`