javascript：单击 table1 列幻灯片以显示 table2 列

Question

Brief: In Mobile Screen would like to Click on Column in Table 1 will Hide it and Slide to display a Column in Table 2 and I can Click on back button to return back to Column in Table 1 using Javascript/jQuery or it can been done with the help of CSS too.简介：在移动屏幕中，想要单击表 1 中的列将隐藏它并滑动以显示表 2 中的列，我可以单击后退按钮使用 Javascript/jQuery 返回到表 1 中的列，或者可以完成也在CSS的帮助下。 How i can do that and provide an example will be much of help too ?我怎么能做到这一点并提供一个例子也会有很大帮助？

Screenshot of current page:当前页面截图：

https://ibb.co/51SRgKw https://ibb.co/51SRgKw

Current page structure:当前页面结构：

 <div class="panel-body blocking"> <div class="row"> <div class="col-lg-4 manage-at__scroll" style="padding:0px;"> <table class="table table-striped table-bordered table-hover"> <tbody> <tr> <th class="text-left">Class Names</th> </tr> <tr class="odd gradeX"> <td class="text-left"> <a style="font-weight: bold;color:#333" href="#">Actual Class Names List</a> </td> </tr> </tbody> </table> </div> <div class="col-lg-4 manage-at__scroll" style="padding:0px;"> <table class="table table-striped table-bordered table-hover"> <tbody> <tr> <th class="text-left">Student Names</th> </tr> <tr class="odd gradeX"> <td class="text-left"> <a style="font-weight: bold;color:#333" href="#">Actual Student Names List</a> </td> </tr> </tbody> </table> </div> <div class="col-lg-4 manage-at__scroll" style="padding:0px;"> <table class="table table-striped table-bordered table-hover" id="student_attendance"> <tbody> <tr> <th class="text-center">Absent Dates</th> </tr> <tr class="gradeX odd"> <td align="center"> <p class="text-left"> <strong>Actual Absent Dates List</strong> </p> <p class="text-left"></p> </td> </tr> <tr> <td> <p class="text-left"> <input type="text"> </p> </td> </tr> </tbody> </table> </div> </div> </div>

Answer 1

my idea with jquery i will use .hide() and .show() to switch your div, first load set style is display:none .我对 jquery 的想法我将使用.hide ()和.show()来切换你的 div，第一个加载集样式是display:none 。

or use jquery mobile .或使用jquery mobile 。

 $(function(){ let switch_page = function(p_id){ $('.manage-at__scroll').hide(200) $(`#${p_id}`).show(200); } $('a.list-class').on('click', function(e){ e.preventDefault(); switch_page('tab2'); }); $('a.list-st').on('click', function(e){ e.preventDefault(); switch_page('tab3'); }); $('#b1').on('click', function(e){ e.preventDefault(); switch_page('tab1'); }); $('#b2').on('click', function(e){ e.preventDefault(); switch_page('tab2'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <body class="container"> <div class="panel-body blocking"> <div class="row"> <div class="col-lg-4 manage-at__scroll" style="padding:0px;" id="tab1"> <table class="table table-striped table-bordered table-hover"> <tbody> <tr> <th class="text-left">Class Names</th> </tr> <tr class="odd gradeX"> <td class="text-left"> <a class="list-class" style="font-weight: bold;color:#333" href="#">Actual Class Names List</a> </td> </tr> </tbody> </table> </div> <div class="col-lg-4 manage-at__scroll" style="padding:0px;display:none;" id="tab2"> <p> <a class="btn btn-default" href="#" id="b1"> back </a> </p> <table class="table table-striped table-bordered table-hover"> <tbody> <tr> <th class="text-left">Student Names</th> </tr> <tr class="odd gradeX"> <td class="text-left"> <a class="list-st" style="font-weight: bold;color:#333" href="#">Actual Student Names List</a> </td> </tr> </tbody> </table> </div> <div class="col-lg-4 manage-at__scroll" style="padding:0px;display:none;" id="tab3"> <p> <a class="btn btn-default" href="#" id="b2"> back </a> </p> <table class="table table-striped table-bordered table-hover" id="student_attendance"> <tbody> <tr> <th class="text-center">Absent Dates</th> </tr> <tr class="gradeX odd"> <td align="center"> <p class="text-left"> <strong>Actual Absent Dates List</strong> </p> <p class="text-left"></p> </td> </tr> <tr> <td> <p class="text-left"> <input type="text"> </p> </td> </tr> </tbody> </table> </div> </div> </div> </body>

javascript：单击 table1 列幻灯片以显示 table2 列

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-01-02 04:51:18

javascript：单击 table1 列幻灯片以显示 table2 列

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-01-02 04:51:18

解决方案1
1 已采纳 2020-01-02 04:51:18