tab菜单的点击的动态效果和内容页面的关联显示jQuery
生活随笔
收集整理的這篇文章主要介紹了
tab菜单的点击的动态效果和内容页面的关联显示jQuery
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!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;/*設(shè)置文字居中*/}.menu-item{float: left;border-right: 1px solid aquamarine; /*在右側(cè)加上一道豎線*/padding: 0 50px; /*上下間距不變，左右間距50px*/cursor: pointer; /*鼠標(biāo)移動上去出現(xiàn)小手的標(biāo)志*/}.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">內(nèi)容一</div><div b="2"class="hide">內(nèi)容二</div><div b="3"class="hide">內(nèi)容三</div></div></div>
<script src="jquery-1.12.4.js"></script>
<script>$('.menu-item').click(function () {// 找到受點擊標(biāo)簽給他添加active樣式，再找到它的兄弟標(biāo)簽，去除avtive樣式
$(this).addClass('active').siblings().removeClass('active');// 拿到受點擊的標(biāo)簽的a的值//var target = $(this).attr('a')//在擁有conetet標(biāo)簽的子標(biāo)簽中找b的值等于a的值的標(biāo)簽，找到后去除它的hide樣式，// 然后找去除樣式的標(biāo)簽的兄弟標(biāo)簽給他們加上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>
//下面這種方法是用索引去做操作同樣完成了上面的操作 而且代碼簡潔 var v = $(this).index()//獲取索引
//eq() 選擇器選取帶有指定 index 值的元素
$('.content').children().eq(v).removeClass('hide').siblings().addClass('hide') }) </script> </body> </html>
效果如下圖：
?
轉(zhuǎn)載于:https://www.cnblogs.com/topzhao/p/9222276.html
總結(jié)
以上是生活随笔為你收集整理的tab菜单的点击的动态效果和内容页面的关联显示jQuery的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 作为我的第一篇csdn博客吧
- 下一篇： [转载]线上应用故障排查之一：高CPU占