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

简介:
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>元素  
}

本文转自  小旭依然  51CTO博客,原文链接:http://blog.51cto.com/xuyran/1863003
相关文章
|
JavaScript
jQuery幸运大转盘抽奖活动代码
jQuery幸运大转盘抽奖活动代码
186 7
jQuery幸运大转盘抽奖活动代码
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
124 1
|
JavaScript
基于jQuery实现文字点击验证代码
jQuery文字点击验证代码基于jquery-3.4.1.min.js制作,按顺序,依次点击文字通过验证。
105 5
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
112 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
204 1
|
JavaScript
jQuery实现的星级打分带评价及颜色区分代码
jQuery实现的星级打分带评价及颜色区分效果代码是一款支持自定义评论颜色的星级评价打分,其中红色为一星级,差评、绿色位五星级、满分好评,本段代码适应于所有网页使用,有需要的朋友们就来下载使用吧。
115 2
|
Web App开发 JavaScript iOS开发
基于jquery开源的页面内模拟滚动条特效插件scrollbar
abcrollBar是一个基于jquery运行的开源滚动条特效插件,体积小巧使用简单的滚动条小插件,它可以通过鼠标中轴滑动页面内的模拟滚动条,或鼠标拖动滚动条查看滚动框架里的内容。支持自定义滚动条的样式,滚动条可选择横或竖呈现,默认也可选择显示或隐藏滚动条。
123 0
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
166 2
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
129 1
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
95 1