您的位置:首页 > Web前端 > JQuery

jquery点击切换 页面多个点击切换 代码封装

2016-10-18 14:42 309 查看
//点击切换
$(function(){
$(".nav-left ul li").click(function(){    //点击切换1
tabChange($(this),$(".forum-container > div")); //内容选项卡
})
$(".dynamic-title ul li ").click(function(){            //点击切换2
tabChange($(this),$(".dynamic-container > div"));
})
$(".tt-personal ul li ").click(function(){
tabChange($(this),$(".formPer-con > div"));
})
$(".forum-search-left ul li ").click(function(){
tabChange($(this),$(".forum-search-right > div"));
})
})

//切换代码
function tabChange(obj1,obj2){
var num = obj1.index(); // 获取当前点击的<li>元素 在 全部li元素中的索引。
obj1.addClass("dynamic-active")            //当前<li>元素高亮
.siblings().removeClass("dynamic-active");  //去掉其它同辈<li>元素的高亮
//选取子节点。不选取子节点的话,会引起错误。如果里面还有div
obj2.eq(num).show()   //显示 <li>元素对应的<div>元素
.siblings().hide(); //隐藏其它几个同辈的<div>元素
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  切换 选项 jquery