Tab栏的切换

最新推荐文章于 2023-06-24 18:17:01 发布

Hard042

最新推荐文章于 2023-06-24 18:17:01 发布

阅读量271

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/Hard042/article/details/83790660

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了使用jQuery实现Tab栏切换效果的具体代码实现过程。通过为Tab栏的每个元素添加点击事件，改变样式并显示相应的面板内容，实现了交互式的Tab栏切换功能。

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

简单记录一下，方便以后复用。

     //切换Tab栏点击事件
	  $("#event_Box > ul >li").click(function(){
	  $(this).addClass("li_background").css("color","#fff");
	  $(this).siblings().removeClass("li_background");
	  $(this).siblings().css("color","#000");
	  var div = $(this).parent().parent().find("#list").children();
	  var index = $(this).index();
	  	$(div[index]).addClass('isSelect').siblings().removeClass('isSelect');
	  	$(div[index]).siblings().css("display", "none");
	  	if($(div[index]).hasClass("isSelect")){
	  		$(div[index]).css("display", "block");
	  	}
    });