点击不同的ul跳转不同的div

 

 

 

 

 

 

 

本文参考下面的连接编写的

<div class="wechat-page">
            <div class="wechat-main-panel">
                <div class="wechat-my-appointment panel_wrap">
                    <ul class="panel_tab">
                        <li class="panel_tab_item active">最近预约</li>
                        <li class="panel_tab_item" id="li_history" οnclick="initProLis()">历史预约</li>    
                    </ul>
                </div>
            </div>
        </div>

<!-- .....................................................上面ul............................................................................................................................-->

<div class="content"> 
<div class="login-contain">
    <div class="form-group">
        <div class="form-item">
            <label for="username">
                <img src="${pageContext.request.contextPath }/bigdate/images/user.png">
            </label>
            <input id="zname" type="text" style="width: 220px"placeholder="姓名"  readonly="readonly">
        </div>
          <div class="form-item">
            <label for="password">
                <img src="${pageContext.request.contextPath }/bigdate/images/zh.png" alt="">
                
            </label>
            <input id="ztel" type="text"style="width: 220px" placeholder="手机号" readonly="readonly">
        </div>
         <div class="form-item">
            <label for="password">
                <img src="${pageContext.request.contextPath }/bigdate/img/wdbm.png" alt="">
            </label>
            <input id="zstate" type="text" style="width: 220px" placeholder="是否报名" readonly="readonly" ><!-- <button οnclick="quxiao()">取消报名</button> -->
            
        </div>
        <div class="form-item">
            <label for="password">
                <img src="${pageContext.request.contextPath }/bigdate/images/sfz.png" alt="">
            </label>
            <input id="zcard" type="text" style="width: 220px"  placeholder="请输入身份证"readonly="readonly">
        </div>
         <div class="form-item">
            <label for="password">
                <img src="${pageContext.request.contextPath }/bigdate/img/sj.png" alt="">
            </label>
            <input id="zselect_date" type="text" style="width: 220px"  placeholder="预约时间" readonly="readonly">
        </div>
            <div class="button-group">
            <button class="login-btn" id="doLogin" style="width:30%;" οnclick="quxiao()">取消预约</button>
            <button class="login-btn" id="doLogin2" style="width:50%;" οnclick="javascript:window.history.back();">返回首页</button>
                </div>
                <div align="center"></div>
    </div>  
 </div>
 <div><!-- 第二个历史预约信息展示的div -->
 <div class="tbdiv2" id="myService"></div>
 </div>
</div>

 $(function(){
    //页面加载显示第一个div
     $(".content>div").eq(0).show().siblings().hide();

}；

    //  点击上面的导航栏跳转  
   $(".panel_tab>li").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
        var index = $(this).index();
        $(".content>div").eq(index).show().siblings().hide();
    })

本文参考https://blog.csdn.net/wsymcxy/article/details/86288719