jQuery网页标签特效的简单实现
复制代码代码如下所示:
。明确{明确:两;高度:0px;溢出:隐藏;}
。标签{宽度:400px;字体大小:12px;}
。tab_menu UL { padding: 0px;保证金:0px;}
。tab_menu李{列表样式:无;显示:块;浮动:左;
背景:# c2cefe;身高:22px;线高度:22px;
填料:0px 8px;右边距:6px;边界:# 86b4ca 1px solid;
}
。箱{宽度:400px;高度:200px;溢出:隐藏;边界:# a8c9d9 1px solid;填充:10px 8px;}
。tab_menu ul。选择{背景:#哒哒哒;鼠标指针;}
隐藏{显示:无;}
jQuery:
复制代码代码如下所示:
$(函数(){())
menu_li = $(var $ div.tab_menu UL Li ); / / 选项卡中选择
menu_li.click美元(函数(){()
$(这)。AddClass(选择) / /高亮当前
兄弟姐妹(RemoveClass)(选择); / /删除其他同行突出
VaR指标= menu_li.index美元($(this); / /)找到子节点索引
$(div.tab_box > div)。情商(指数)显示(N) / /指数DVI显示器
(兄弟姐妹)(隐藏);其他隐藏标签
})
})
HTML:
复制代码代码如下所示:
个人信息
我的照片
我的博客
我的QQ:123456
您好!
你好