Ⅱ 版本二、 html强大的“点击左侧栏目，右侧对应的内容显示的模板思路”一套一个准。

本文链接：https://blog.youkuaiyun.com/weixin_44826783/article/details/134376641

本文讲述了在JavaScript代码中处理点击事件时，避免数组下标异常的关键修改，即当点击相同的元素时，如何正确切换显示状态并更新标识变量。作者强调了分步骤处理和条件判断的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

继Ⅰ之后，就是可能有一些需求就是如果当前点击的和已经显示的相同，那么此时会将当前的隐藏。

我们在上一篇的代码中的else继续编写代码，看注释。

else{
    $(".right > p).eq(curIdx).css("display","none") ;
    //或者是$(".right > p).eq(show_tag).css("display","none")
    show_tag = -1 //-1代表right > p 没有任何显示的
}

但是同学们，你们觉得这样写会不会有问题呢？可以自己对整个点击click函数走一遍，可能会发现，如果此时点击相同的，show_tag就是-1了，那么这时候当我点击任意一个，假如第一个，index是0，那么走第一个if判断，0 !== -1 成立，那么这时候就会走if里面的逻辑，那我们就会让$(".right > p").eq(-1).css("display","none")，这样肯定会报错。数组下标异常。

所以我们就应该在if判断里面，再多加一个判断

if(curIdx !== show_tag){
    if(show_tag === -1){
        //直接让当前对应的$(".right > p ").eq(curIdx).css("display","block")
        $(".right > p ").eq(curIdx).css("display","block")
        show_tag = curIdx ;
    }else{
        $(".right > p").eq(show_tag).css("display","none")
        $(".right > p").eq(curIdx).css("display","block")
    }
}

所以整个代码就是

if(curIdx !== show_tag){
    if(show_tag === -1){
        //直接让当前对应的$(".right > p ").eq(curIdx).css("display","block")
        $(".right > p ").eq(curIdx).css("display","block")
        show_tag = curIdx ;
    }else{
        $(".right > p").eq(show_tag).css("display","none")
        $(".right > p").eq(curIdx).css("display","block")
    }
}else{
    $(".right > p).eq(curIdx).css("display","none") ;
    //或者是$(".right > p).eq(show_tag).css("display","none")
    show_tag = -1 //-1代表right > p 没有任何显示的
}

总结：

以后遇到这种需求的时候，什么都不想，分两步走：

①直接先声明一个变量show_tag代表当前显示的index，默认一般给的是0，因为基本很多场景都得先默认显示第一个，当然也不能排除其他情况是默认没有显示的，那么这时候我们就得给-1。

②获取当前点击的document的index，然后进行判断，如果是不相同的，就让已经显示的show_tag对应的隐藏，当前自己index显示，不要忘了更新show_tag的值为当前的index；如果是相同的，看场景需求，如果相同的需要让自己index对应的隐藏，然后更新show_tag为-1。如果有这个需求的话，那么必须在if当前的index与已经显示的show_tag 不相同的时候，再次判断show_tag为-1的情况（原因已经在上面说了），然后直接让当前对应的index显示，再更新show_tag的值为当前的index。那么如果没有这个需求，就不用。

最后：如果大家觉得博主写的不错的话，可以给个免费的赞赞。谢谢。