簡單描述需求：
- 1、頂部四個按鈕代表功能，按下其中一個按鈕，區域1列出這個功能的子模塊；按下另一個按鈕，這塊區域顯示的又是另一個功能的子模塊（table1內容切換）。
注：按下按鈕的之后顯示區域1的內容，同時會清空區域2 的內容。
- 2、點擊table1中的其中一條子模塊，區域2列出這個子模塊的詳細信息，點擊另一條子模塊（table2內容切換）。
嘗試一：
1、思路：
- 區域1有四個div，各自裝有四個功能要顯示的 功能列表（ul>li）；
- 點擊功能1時顯示div1，其余三個div被隱藏，通過show()和hide() 方法來控制區域1 顯示不同功能的子模塊列表。
- 點擊列表內的模塊時，區域2顯示不同的table，1、2、 3 、 4......（好像會很多）
2、失敗原因：
當有四個功能時，可以通過四個div的顯示和隱藏來切換 “區域1” 的內容；但是同樣的方法，通過點擊功能列表在 “區域2” 顯示子模塊的詳情時，若是有很多很多個子模塊，豈不是需要無數個div來切換顯示，所以這個方法行不通；
3、代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="assets/bootstrap-4.1.3-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/style.css"> <script src="assets/jQuery/jquery-3.2.1.min.js"></script> <script src="assets/main.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-3 box1" id="divbox1">功能1</div> <div class="col-3 box1" id="divbox2">功能2</div> <div class="col-3 box1" id="divbox3">功能3</div> <div class="col-3 box1" id="divbox4">功能4</div> </div> <!-- 區域1 --> <div> <!-- 下面為四個div --> <div class="content-one"> <ul class="list-group"></ul> <table class="table table-striped table-bordered table-hover" id="table1"> <tr> <th>key</th> <th>value</th> </tr> <tbody id="mytab1"></tbody> </table> </div> <div class="content-two"> <ul class="list-group"></ul> <table class="table table-striped table-bordered table-hover" id="table2"> <tr> <th>key</th> <th>value</th> </tr> <tbody id="mytab2"></tbody> </table> </div> <div class="content-three"> <ul class="list-group"></ul> <table class="table table-striped table-bordered table-hover" id="table3"> <tr> <th>key</th> <th>value</th> </tr> <tbody id="mytab3"></tbody> </table> </div> <div class="content-four"> <ul class="list-group"></ul> <table class="table table-striped table-bordered table-hover" id="table4"> <tr> <th>key</th> <th>value</th> </tr> <tbody id="mytab4"></tbody> </table> </div> </div> </div> </body> </html>
//main.js代碼： $(function() { var test1 = 1; var test2 = 1; var test3 = 1; var test4 = 1; var anArray1 = [ 'one', 'two', 'three' ]; var anArray2 = [ '功能1', '功能2', '功能3' ]; var anArray3 = [ '設備1', '設備2', '設備3' ]; var detail1 = " [ {name:'6101',value:'北京市'}, {name:'6102',value:'天津市'}, {name:'6103',value:'上海市'}]"; var detailObj1 = eval("(" + detail1 + ")"); // 轉換為json對象 var detail2 = " [ {name:'注冊用戶',value:'32'}, {name:'在線用戶',value:'13'}, {name:'VIP用戶',value:'10'}]"; var detailObj2 = eval("(" + detail2 + ")"); var detail3 = " [ {name:'性能',value:'良好'}, {name:'反應速度',value:'快'}, {name:'品牌',value:'華為'}]"; var detailObj3 = eval("(" + detail3 + ")"); //下面有隱藏和刪除兩種嘗試，都只以div1為例子，還要copy出div2、3、4 //嘗試1 $("#divbox1").click(function(e) { $("#table1").hide(); var str1 = '<li class="list-group-item list1">' var str2 = '</li>'; if (test1 == 1) { // 遍歷數組 anArray for (i in anArray1) { $(".content-one ul").append(str1 + anArray1[i] + str2); } // 遍歷data對象，插入到table內部 var $tab1 = $("#mytab1"); for (i = 0; i < detailObj1.length; i++) { $tab1.append("<tr>"); $.each(detailObj1[i],function(j, val) { $("#mytab1").append("<td>" + val + "</td>"); }); $tab1.append("</tr>"); } } test1 = 2; if (test1 == 2) { $(".content-one").show(); $(".content-one").siblings("div").hide(); } // 展示table詳情 $(".list2").click(function() { $("#table2").show(); }); $(".list2").dblclick(function() { $(".content-two").hide(); }); }); //嘗試2 $(".box2").click(function(e) { var aaa = e.target.innerHTML; var bbb = getfunc(aaa); $(".list1,.list3,.list4").remove();//除了自己，其他所有li標簽都刪除 test1 = 1;//恢復其他divbox可以點擊 var str1 = '<li class="list-group-item list2">' var str2 = '</li>'; if (test2 == 1) { // 遍歷數組 anArray for (i in bbb) { $(".content-one ul").append(str1 + bbb[i] + str2); } } test2 = 2; $(".list-group-item").click(function(e){ var aaa1 = e.target.innerHTML; var bbb1 = getfunc(aaa1); console.log(bbb1); var $tab1 = $("#mytab1"); if(test2 == 2){ for (i in bbb1) { // alert(bbb1[i]); $tab1.append("<tr class='list1'>"); $("#mytab1").append("<td class='list2'>" + bbb1[i] + "</td>"); $tab1.append("</tr>"); } } test2 = 3; }); }); })
嘗試二：
1、思路：
- 系統初始化時默認顯示區域1中“功能1”的子模塊列表，區域2為空（記得隱藏區域2的表頭）；
- 區域1有一個div，點擊“按鈕1“，div里顯示功能1的子模塊列表；再次點擊“按鈕2”時，將區域1和區域2的內容全部清空，再繼續加載功能2的列表，以此類推~~~（先清空，再加載）；
- 區域2 也同理，不同的是點擊“按鈕1”時要清空區域1和區域2再加載，但是點擊模塊列表時只是清空區域2的內容再重新加載區域2，影響不到區域1；
- 只需要1個div，通過判斷所點擊的div的內容（innerHTML）來選擇所要加載的哪一個數組~~~
1、代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="assets/bootstrap-4.1.3-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/style.css"> <script src="assets/jQuery/jquery-3.2.1.min.js"></script> <script src="assets/main.js"></script> </head> <body> <div class="container"> <div class="titleDiv"> <div class="main-nav"> <div class="row fl" id="row"> <div class="col-3 box" id="divbox1">功能1</div> <div class="col-3 box" id="divbox2">功能2</div> <div class="col-3 box" id="divbox3">功能3</div> <div class="col-3 box" id="divbox4">功能4</div> </div> </div> </div> <div class="content-one"> <!-- 區域1 --> <table class="table table-bordered table-hover" id="table1"> <tr class="tableTh"> <th>key</th> <th>value</th> </tr> <tbody id="mytab1"></tbody> </table> <!-- 區域2 --> <table class="table table-bordered table-hover" id="table2"> <tr class="tableTh"> <th>key</th> <th>value</th> <th>修改</th> </tr> <tbody id="mytab2"></tbody> </table> </div> </div> </body> </html>
$(function() { var list1 = " [ {name:'1234',value:'北京市'}, {name:'6102',value:'天津市'}, {name:'6103',value:'上海市'}]"; var listObj1 = eval("(" + list1 + ")"); // 轉換為json對象 var list2 = " [ {name:'性能',value:'良好'}, {name:'反應速度',value:'快'}, {name:'品牌',value:'華為'}]"; var listObj2 = eval("(" + list2 + ")"); var detail1 = " [ {name:'6101',value:'北京市'}, {name:'6102',value:'天津市'}, {name:'6103',value:'上海市'}]"; var detailObj1 = eval("(" + detail1 + ")"); // 轉換為json對象 、 var detail2 = " [ {name:'注冊用戶',value:'32'}, {name:'在線用戶',value:'13'}, {name:'VIP用戶',value:'10'}]"; var detailObj2 = eval("(" + detail2 + ")"); //重點代碼（通過判斷所點擊的div的內容是什么，再來選擇所需要加載的是哪一個數組） function getChildren(parent){ if(parent == '功能1'){ return listObj1; } else if(parent == '功能2'){ return listObj2; } else if(parent == '1234'){ return detailObj1; } else if(parent == '性能'){ return detailObj2; } } //初始化 $("#table2 .tableTh").hide(); //初始化隱藏table1的頭部 for (i in listObj1) { $.each(listObj1[i], function(j, val) { $("#mytab1").append("<td class='list-item delete'>" + val + "</td>"); }); $("#mytab1").append("<tr class='delete'>"); $("#mytab1").append("</tr>") } $(".list-item").click(function(e){ $("#table2 .tableTh").show(); //顯示table1的頭部 $(".delTr").remove(); //清空所有class為delete的標簽 var aaa1 = e.target.innerHTML; var bbb1 = getChildren(aaa1); var $tab2 = $("#mytab2"); for (i in bbb1) { $.each(bbb1[i], function(j, val) { $("#mytab2").append("<td class='delete delTr'>" + val + "</td>"); }); $tab2.append("<tr class='delete delTr'>"); $tab2.append("</tr>") } }); //初始化 結束 $(".box").click(function(e) { // this.css('background','#169BD5'); $("#table2 .tableTh").hide(); //隱藏table1的頭部 $(".delete").remove();//清空所有class為delete的標簽 var aaa = e.target.innerHTML; //aaa是被鼠標點擊的div里的值 （功能1） var bbb = getChildren(aaa); //bbb是一個數組，通過判斷aaa是哪一個值，來判斷bbb是哪一個數組 // 遍歷數組 anArray for (i in bbb) { $.each(bbb[i], function(j, val) { $("#mytab1").append("<td class='list-item delete'>" + val + "</td>"); }); $("#mytab1").append("<tr class='delete'>"); $("#mytab1").append("</tr>") } $(".list-item").click(function(e){ $("#table2 .tableTh").show(); //顯示table1的頭部 $(".delTr").remove(); //清空所有class為delete的標簽 var aaa1 = e.target.innerHTML; var bbb1 = getChildren(aaa1); var $tab2 = $("#mytab2"); for (i in bbb1) { $.each(bbb1[i], function(j, val) { $("#mytab2").append("<td class='delete delTr'>" + val + "</td>"); }); $tab2.append("<tr class='delete delTr'>"); $tab2.append("</tr>") } }); }); })