jquery点击切换 页面多个点击切换 代码封装-阿里云开发者社区

开发者社区> 技术小牛人> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【jQuery 使用】 利用jQuery.prop("outerHTML")获取包含自身在内的HTML元素的HTML代码
jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML")的方式设置。 很多jQuery的使用者都对这一问题深感疑惑。
851 0
使用highlight.js高亮静态页面的语言代码
  显示静态的代码其实html的pre标签基本可以满足需求了,至少不会将换行的文本显示成一堆字符串。 不过能使静态的文本能高亮显示,倒更炫酷一点。其实很简单的,引入highlight.js包,可以使用cdn上的静态资源,引入css和js: 将要显示的代码包在标签 之间即可。
1385 0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1851 0
关于html5与jsp页面同样的html代码展示的页面效果不一样的问题
原文: 关于html5与jsp页面同样的html代码展示的页面效果不一样的问题 html5默认的声明为 jsp默认的声明头部为 这里就不一样了,如果两个页面写同样的html代码及样式,jsp页面展示的效果会跟html5页面不一样,...
890 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12035 0
【钉钉搭】低代码模版系列——软件项目管理|一个表单的作用有多大?
钉钉搭低代码模版系列上线啦,首期为大家带来的是软件项目管理,这是一个适用IT企业软件项目管理的模版,可以实现从项目立项、到进度计划、任务安排、工时统计等一站式管理,跟踪任务进度,存储项目文档,即时讨论项目相关问题,实现IT企业研发项目全过程管理。
423 0
jquery常用代码片段
1)判断一个元素是否存在 使用jQuery判断元素是否存在,非常的简单。对于一个jQuery对象,我们只需要用length属性即可判断元素是否存在,如果存在肯定是大于0,示例代码: 判断这个图片是否存在,如果存在在把这个图片替换 $(document).
803 0
5723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载