怎么在当前页面点击不同的按钮切换为不同的页面?

我想点击那个【查询热表地址】按钮，然后下面的页面切换成一个新的页面，只有点的时候才显示，不点还是原来的样子，怎么搞啊，没怎么学过前台的东西。
https://www.zhihu.com/question/368924668
跟这个差不多，我看百度了，但我还是buhui写┭┮﹏┭┮



<script type="text/javascript">
//查询热表地址
function QgCcRb(){
    var ckbs=$("#qgInfo input[type=checkbox]:checked");
    if(ckbs.length==0){
        alert("请选择要查询的区管");
        return false;
    }
    if(ckbs.length>1){
        alert("对不起一次只能选择一个");
        return false;
    }
    var id=ckbs.val();
    var Zuhao= $('#Zuhao').val();
    $.ajax({
        url:"/RbHotPower/QgCon/QgCcRb.action",
        async:false,
        dataType:"json",
        data:{
            "ids":id,
            "zuhao":Zuhao
        },
        success:function(data){
                msg=data.js;
                if(msg=="0"){
                    alert("查询热表地址接收指令成功!")
                    
                }
                if (msg=="2"){
                    alert("集中器不在线!")
                    
                }
                if(msg=="1"){
                    alert("查询热表失败!")
                    
                }
                //selQg();
            }
            
        });
}
<script type="text/javascript">
//根据小区查询区管信息
function selQg(){
        var   xqName = $('#xqNameId').val();
        var   qgID=$('#qgID').val();
        var html ="";
        $.ajax({ 
                    url:"CxQg.action",
                    async : false,
                    dataType : "json",
                    data : {
                        "xqName" : xqName,
                        "qgID" : qgID,  
                    },
                    success : function(data) {
                        $("#qgInfo").empty();
                        var d=data.qglists;
                        for(var i=0;i<d.length;i++){
                            var id=d[i].id;
                            var QgID=d[i].qgID;
                            var XqName=d[i].xqName;
                            var InstallAd=d[i].installAd;
                            var RecordTime =d[i].recordTime ;
                            var qgFl=d[i].qgFl;
                            if(i%2 == 1){
                                html+= "<tr class='gradeX odd'>";
                            }else if(i%2 == 0){
                                html+= "<tr class='gradeX even'>";
                            }
                            html+="<td class='text-center'><input type='checkbox' name='pchecked'  value='"+QgID+"'/></td>";
                            html+="<td class='text-center'>"+QgID+"</td>";
                            html+="<td class='text-center'>"+XqName+"</td>";
                            html+="<td class='text-center'>"+InstallAd+"</td>";
                            html+="<td class='text-center'>"+RecordTime+"</td>";
                            if(qgFl=="1"){
                            html+="<td class='text-center'>"+"单系统"+"</td>";
                            }else{
                            html+="<td class='text-center'>"+"双系统"+"</td>";    
                            }
                            html+="</tr>";
                            }
                          html+="</tbody>"
                          html+="</table>";
                          html+="</div>";
                        $("#qgInfo").append(html);
                    }
        })
}

function allSelected(){
       /*  $("input[name='pchecked']").attr('checked',true); */
        var check = document.getElementsByName('pchecked');
        for(var i=0;i<check.length;i++){
            if(check[i].checked==true){
                check[i].checked=false;
            }else{
                check[i].checked=true;
            }
        }
}
</script>

</head>
<body>
    <div id="increasedis" class="clearfix"
        style="overflow-x: hidden; height: 1000px;">
        <div class="mws-panel grid_8 "
            style="width: 105%; padding-left: 12px; margin: 0px 0px 10px 0px; min-width: 650px">
            <div class="mws-panel-header" style="height: 50px;">
                <span style="display: inline" class="mws-i-24 i-table-1">查询热表地址</span>&nbsp;
                &nbsp; &nbsp;<span id="xqspan" style="display: inline"></span>
            </div>
            <div class="search">
                <p>
                    <label for="xqNameId">选择小区</label> <select id="xqNameId"
                        name="xqName">
                        <c:if test="${!empty yhInfoList }">
                            <option>--选择小区名称--</option>
                            <c:forEach items="${yhInfoList}" var="yhInfolist">
                                <option>${yhInfolist.xqName}</option>
                            </c:forEach>
                        </c:if>
                    </select> 
                    &nbsp;&nbsp; 
                    <label for="qgID">区管ID</label> 
                    <select name="qgID" id="qgID">
                        <option value="">--区管ID--</option>
                    </select> 
                    <!-- 区管ID模糊查询：<input type="text" name="QgID" id="QgID">  -->
                    <input id="operation_one_btn" type="button" onclick="selQg()" value="搜索">
                    <!-- <button id="operation_one_btn" onclick="allSelected()">全选</button> -->
                    组号：<input type="text" size="10px" name="Zuhao" id="Zuhao"> 
                    <button type="button" id="operation_one_btn" onclick="QgCcRb()">查询热表地址</button><br>
                    选择组号:<select id="xzzh">
                    <option value="">1</option><option value="" >2</option><option value="">3</option><option value="">4</option><option value="">5</option>
                    <option value="">6</option><option value="" >7</option><option value="">8</option><option value="">9</option><option value="">10</option>
                    <option value="">11</option><option value="" >12</option><option value="">13</option><option value="">14</option><option value="">15</option>
                    <option value="">16</option><option value="" >17</option><option value="">18</option><option value="">19</option><option value="">20</option>
                    <option value="">21</option><option value="" >22</option><option value="">23</option><option value="">24</option><option value="">25</option> 
                    </select>
                    1：<input type="text" size="13px" name="RbAd1" id="RbAd1">
                    2：<input type="text" size="13px" name="RbAd2" id="RbAd2">
                    3：<input type="text" size="13px" name="RbAd3" id="RbAd3">
                    4：<input type="text" size="13px" name="RbAd4" id="RbAd4">
                    5：<input type="text" size="13px" name="RbAd5" id="RbAd5">
                    6：<input type="text" size="13px" name="RbAd6" id="RbAd6">
                    7：<input type="text" size="13px" name="RbAd7" id="RbAd7">
                    8：<input type="text" size="13px" name="RbAd8" id="RbAd8">
                    9：<input type="text" size="13px" name="RbAd9" id="RbAd9">
                    10：<input type="text" size="13px" name="RbAd10" id="RbAd10">
                    <button type="button" id="operation_one_btn" onclick="add()">添加热表地址</button>                    
                    <!-- <input type="button" value="导出" id="operation_one_btn" onclick="doExportExcel()" />-->
                </p>
            </div>


    <div id="xincreate_table_body" class="mws-panel-body"
                style="overflow: scroll !important; height: 680px;">

                <table id="fixed_hdr2" class="mws-table" style="width: 100%;">
                    <thead>
                        <tr>
                            <th class="table-th-css"></th>
                            <th class="table-th-css">区管ID<span class="span-up"></span>
                                <span class="span-down"></span></th>
                            <th class="table-th-css">小区名称<span class="span-up"></span> <span
                                class="span-down"></span></th>
                            <th class="table-th-css">安装位置<span class="span-up"></span> <span
                                class="span-down"></span></th>
                            <th class="table-th-css">更新时间<span class="span-up"></span> <span
                                class="span-down"></span></th>
                            <th class="table-th-css">区管版本<span class="span-up"></span> <span
                                class="span-down"></span></th>
                        </tr>
                    </thead>

                    <tbody id="qgInfo">
                        <c:forEach var="qg" items="${qglists}" varStatus="status">

                            <tr
                                <c:if test="${status.index%2==1 }">style="background-color:#F2F2F2"</c:if>>
                                <td><input type="checkbox" value="${qg.qgID}"
                                    name="pchecked" /></td>
                                <td>${qg.qgID}</td>
                                <td>${qg.xqName }</td>
                                <td>${qg.installAd}</td>
                                <td>${qg.recordTime}</td>
                                <c:if test="${qg.qgFl==1}">
                                    <td>单系统</td>
                                </c:if>
                                <c:if test="${qg.qgFl==2}">
                                    <td>双系统</td>
                                </c:if>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
            
            
            
<%--          <div id="xincreate_table_body" class="mws-panel-body"
                style="overflow: scroll !important; height: 680px;">
                <table id="fixed_hdr2" class="mws-table" style="width: 100%;">
                    <thead>
                        <tr>
                            <th class="table-th-css" width="6%"></th>
                            <th class="table-th-css" >区管ID<span class="span-up"></span>
                                <span class="span-down"></span></th>
                            <th class="table-th-css" >组号<span class="span-up"></span> <span
                                class="span-down"></span></th>
                            <th class="table-th-css">一<span class="span-up"></span> <span
                                class="span-down"></span></th>
                            <th class="table-th-css">二<span class="span-up"></span> <span
                                class="span-down"></span></th>
                            <th class="table-th-css">三<span class="span-up"></span> <span
                                class="span-down"></span></th>
                            <th class="table-th-css">四<span class="span-up"></span> <span
                                class="span-down"></span></th>
                            <th class="table-th-css">五<span class="span-up"></span> <span
                                class="span-down"></span></th>
                            <th class="table-th-css">六<span class="span-up"></span> <span
                                class="span-down"></span></th>
                            <th class="table-th-css">七<span class="span-up"></span> <span
                                class="span-down"></span></th>
                            <th class="table-th-css">八<span class="span-up"></span> <span
                                class="span-down"></span></th>
                            <th class="table-th-css">九<span class="span-up"></span> <span
                                class="span-down"></span></th>
                            <th class="table-th-css">十<span class="span-up"></span> <span
                                class="span-down"></span></th>
                            <th class="table-th-css">更新时间<span class="span-up"></span> <span
                                class="span-down"></span></th>
                        </tr>
                    </thead>

                    <tbody id="qgccrbInfo">
                        <c:forEach var="qg" items="${qglists}" varStatus="status">

                            <tr
                                <c:if test="${status.index%2==1 }">style="background-color:#F2F2F2"</c:if>>
                                <td><input type="checkbox" value="${qg.qgID}"
                                    name="pchecked" />
                                    <button type="button" onclick="aa()" style="width:50px;">上传</button></td>
                                <td>${qg.qgCcrb.qgID}</td>
                                <td>${qg.qgCcrb.zuhao}</td>
                                <td>${qg.qgCcrb.rbad1}</td>
                                <td>${qg.qgCcrb.rbad2}</td>
                                <td>${qg.qgCcrb.rbad3}</td>
                                <td>${qg.qgCcrb.rbad4}</td>
                                <td>${qg.qgCcrb.rbad5}</td>
                                <td>${qg.qgCcrb.rbad6}</td>
                                <td>${qg.qgCcrb.rbad7}</td>
                                <td>${qg.qgCcrb.rbad8}</td>
                                <td>${qg.qgCcrb.rbad9}</td>
                                <td>${qg.qgCcrb.rbad10}</td>
                                <td>${qg.qgCcrb.recordTime}</td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div> --%>
            
        </div>
    </div>
</body>
</html>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
前端小白... 2022-03-25 17:27
关注
思路相当于点击的时候变下边的数据点击查询热表地址隐藏下面的数据把你想要的数据显示出来可以用 display='none';-display='bolck‘;控制元素显示隐藏

function 事件名(){ document.getElementById("show").style.display="block"; //想要展示的元素 document.getElementById("hide").style.display="none"; //一开始的元素 } //无非就是点谁显示谁隐藏谁
本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决无用
评论打赏
分享
举报编辑记录

评论

按下Enter换行，Ctrl+Enter发表内容

查看更多回答(1条)

报告相同问题？

关注问题

怎么在当前页面点击不同的按钮切换为不同的页面? ajax html5 javascript
2022-03-25 17:13

回答 2 已采纳思路相当于点击的时候变下边的数据点击查询热表地址隐藏下面的数据把你想要的数据显示出来可以用 display='none';-display='bolck‘;控制元素显示隐藏 functi
如何让element Vue在同一个vue页面用不同按钮响应不同的dialog显示不同内容？ elementui java vue.js
2022-04-08 17:07

回答 1 已采纳最简单的方法定义actionType，点击不同按钮赋值为不同的值，dialog中使用v-if actionType ===x 判断显示，弹窗中的确认函数同理用actionType判断执行不同函数例如添
HTML如何简单实现切换页面? html 前端
2022-01-02 08:38

回答 3 已采纳参考下Bootstrap Navs and tabs · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网 D
vue3中如何实现通过点击不同的按钮切换不同的页面
2023-09-08 16:22

燕哥学前端的博客 // 点击按钮切换事件 const selectChange = (item) => { selectedBtn.value = item.id; selectedComponent.value = item.component; } onMounted(() => { selectedBtn.value = topBtn.value[0].id; }) </script> ...
ztree树形结构根据点击结点实现页面切换 html 前端前端框架
2022-06-20 15:32

回答 1 已采纳这个主要是页面跳转？需要传一个参数。然后根据参数渲染不同的页面。监听节点点击事件然后跳转页面并传参。或者是监听节点点击事件然后替换页面内容。
mfc中如何在同一个编辑框内进行不同页面的切换 c++ 有问必答
2022-07-07 09:23

回答 3 已采纳选项卡的切换： MFC选项卡的实现_雷霄骅的博客-CSDN博客_mfc 对话框选项卡方案一在对话框上放置一个Tab Control的控件
防止用户频繁点击切换页面的按钮 ajax html5 javascript jquery typescript
2020-01-09 18:56

回答 4 已采纳点击时用localStorage记录点击的时间。下次点击时判断当前时间与localStorage记录的时间相差是否大于1秒。
Vue案例--点击按钮切换页面
2022-10-11 09:40

春意迟迟、的博客 vue2做一个页面切换效果
vue 同一个页面切换不同布局 javascript 有问必答
2021-06-25 10:58

回答 2 已采纳你是指所有页面吗？如果只是一个页面。那你写两个组件，两个布局利用v-if判断v-if=="小程序"就显示其布局组件。
点击el-tree的节点，页面显示不同的内容，这是怎么实现的啊？组件切换吗？ elementui javascript vue.js
2022-04-21 22:58

回答 1 已采纳 1.传统的if逻辑，首先右边的，全部做成单独组建，在整个大框架中import，点击a的时候，右边对应显示相应的组件，v-if去显示，类似于选项卡。进阶是使用动态组件的is属性，这样就可以不用写很多if
为什么van-tabs没被切换到指定页面？ vue.js
2021-06-19 23:45

回答 1 已采纳好了，已经解决了，是vans-tab的v-moel只支持number类型，而我传递的参数是string类型
VUE 切换页面后点击按钮没有反应
2022-09-28 09:47

喜欢吃糖丶的博客昨天线上环境出现了一个页面问题，据当事人称，他当时在这个页面停留了很久，因为吃饭去了，然后回来发现此页面按钮点不了了，除了按钮点不了外没有其他问题，按钮就跟不存在一样页面因不好对外展示已换成其他页面。
怎样实现点击按钮切换年份 css javascript jquery
2021-06-07 12:47

回答 5 已采纳直接获取每个年份，转成数值，加5，然后再放回去，就好了。参考代码给你贴一下，样式你自己调吧： <body> <div class="wrap"> <div
vue 实现点击切换不同页面的两种方法
2020-02-29 08:54

淘淘是只狗的博客总经理**在2020新品订货会上致欢迎词</span> 小食事业部正式转为流通事业部</span> </div> </div> </template> <script> export default { methods: { switchTo (path) { this.$router.replace(path) } } } ...
vue 不同条件展示不同页面_Vue 指令 / 页面展示
2021-03-07 07:04

华笠医生的博客页面展示基本指令v-text用于在页面中展示数据，可以简写为{{ }}的形式{{msg}}v-html同样是用于展示数据，与v-text区别相当于innerHtml和textContentv-pre用来在展示页面是跳过渲染某一段代码，该方法主要可以用来跳...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 4月5日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 3月28日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 3月25日

悬赏问题

¥20 西门子S7-Graph,S7-300，梯形图
¥50 用易语言http 访问不了网页
¥50 safari浏览器fetch提交数据后数据丢失问题
¥15 matlab不知道怎么改，求解答！！
¥15 永磁直线电机的电流环pi调不出来
¥15 用stata实现聚类的代码
¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
¥20 docker里部署springboot项目，访问不到扬声器
¥15 netty整合springboot之后自动重连失效
¥15 悬赏！微信开发者工具报错，求帮改

怎么在当前页面点击不同的按钮切换为不同的页面?

2条回答 默认 最新

问题事件

悬赏问题

2条回答默认最新