|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
//点击切换
$(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点击切换 页面多个点击切换 代码封装
2017-11-13
1011
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
目录
相关文章
|
1月前
|
JavaScript
|
5月前
|
JavaScript
前端开发
|
5月前
|
JavaScript
|
5月前
|
JavaScript
|
3月前
|
JavaScript
前端开发
|
1月前
|
JavaScript
|
1月前
|
前端开发
JavaScript
|
6月前
|
缓存
前端开发
JavaScript
|
4月前
|
JavaScript
前端开发
Python
|
4月前
|
JavaScript
程序员