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

最新推荐文章于 2022-11-14 10:58:03 发布

weixin_34009794

最新推荐文章于 2022-11-14 10:58:03 发布

阅读量320

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/561950

本文介绍了一种使用jQuery实现的网页选项卡切换功能。通过点击不同导航项，可以动态展示对应的内容区域，并隐藏其他内容。该方法适用于论坛、个人中心等页面中常见的选项卡布局。

//点击切换
$(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