js 点击切换显示隐藏状态

html代码
首先创建需要点击的 div 这里我用的是 li 标签

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/dz_center.css">
    </head>
    <body>
    <div class="bg">
        <!-- 左边导航栏 -->
        <div class="leftBox">
            <nav>
                <ul>
                 //导航栏的标题
                    <span class="personalCenter"><img src='img/userName.png' alt="">个人中心</span>             //在li 上绑定点击事件
                    <li onclick="offlineApplication()" style="cursor: pointer;">我要贷款</li>
                    <li onclick="technological()" style="cursor: pointer;">申请贷款</li>
                    <li onclick="iWantAloan()" style="cursor: pointer;">详细信息</li>
                </ul>
            </nav>
          
        </div>
        <!-- 我要贷款页面 -->
            <div class="application" id="application">
                <span>我要贷款页面</span>
            </div>
            <!-- 申请贷款页面 -->
              <div class="applyForALoan" id="applyForALoan">
                <span>我要贷款页面</span>
              </div>
            <!-- 详细信息 -->
            <div class="detailedInformation" id="detailedInformation" style="display: none;">
               <div class="isDetailedInformation">同意贷款</div>
            </div>
    </body>
</html>

js页面在点击事件中隐藏需要隐藏的部分显示需要显示的内容

// 我要贷款页面  #application
function offlineApplication(){
    
    
 //获取需要显示或隐藏的id
    $("#application").show();//显示
	$("#applyForALoan").hide();//隐藏
	$("#detailedInformation").hide();//隐藏
}
//申请贷款 #applyForALoan
function technological(){
    
    
	$("#applyForALoan").show();//显示
	$("#application").hide();//隐藏
	$("#detailedInformation").hide();//隐藏
}
//详细信息 #detailedInformation
function iWantAloan(){
    
    
	$("#detailedInformation").show();//显示
	$("#application").hide();//隐藏
	$("#applyForALoan").hide();//隐藏
}

js 点击切换显示隐藏状态

Guess you like