小记:页面tab按钮切换页面

最新推荐文章于 2022-10-11 09:40:20 发布

小段同学前来报到

最新推荐文章于 2022-10-11 09:40:20 发布

阅读量243

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/qq_41035779/article/details/115086545

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

需求:点击按钮,进行列表展示切换:(我本身是java,这对我来说有点难,每次都很怕这种页面)
在这里插入图片描述
首先,新建div

 <div class="secondTitle" style="height: 60px; margin: 0 0 0 0;float: left;">
           <div id="all" class="conditionTitle <c:if test="${mark =='all'||mark eq null ||mark eq ''}">active</c:if>" >全部</div>
            <div id="alreadyCheck" class="conditionTitle <c:if test="${mark =='alreadyCheck'}">active</c:if>" >已缴费</div>
            <div id="notCheck" class="conditionTitle <c:if test="${mark =='notCheck'}">active</c:if>" >部分缴费</div>
            <div id="notPayment" class="conditionTitle <c:if test="${mark =='notPayment'}">active</c:if>" >未缴费</div>
</div>

其次,再建每个按钮对应的显示区域

<div class="contentDiv alreadyCheckDiv" style="display: none">
</div>
<div class="contentDiv all">
</div>

然后就是js控制啦

$(function(){
var mark = $("#mark").val();
	if(mark!=null&&mark!=""){
		$(".conditionTitle").removeClass("active");
		$(".contentDiv").hide()
        $(".instructionsSpan").hide()
		$(".askForRecord").hide();
		 
		if(mark=="alreadyCheck"){
			$(".alreadyCheckDiv").show();
           	$(".alreadyCheckSpan").show();
               $("#alreadyCheck").addClass("active");
		}else if(mark=="notCheck"){
			$(".notCheckDiv").show();
           	$(".notCheckSpan").show();
               $("#notCheck").addClass("active");
		}else if(mark=="notPayment"){
			$(".notPaymentDiv").show();
           	$(".notPaymentSpan").show();
			$(".askForRecord").show();
               $("#notPayment").addClass("active");
		}
	}
})

这就是我tab页切换的笨方法,嘿嘿,欢迎指教