1. 需要對bootstrap的“css”“js”進行引入
2. <link href="~/Plugins/bootstrap-4.1.3-dist/css/bootstrap.css" rel="stylesheet" />
3. <script src="~/Plugins/bootstrap-4.1.3-dist/js/bootstrap.js"></script>
4. <!-- 注意：如果你直接複製所有代碼到本地，上述路徑需要改成你本地的 -->
5. <body style="background:#f6f6f6;margin:10px;">
6. @*進貨報表*@
7. <div style="width:145px;height:50px;">
8. <div style="width:104px;border-radius:5px; height:30px;margin-top:8px;margin-right:10px; border:1px solid;color:#b0aeae;float:right;">
9. <a href="javascript:;" id="gdhdj">展開統計數據</a>
10. </div>
11. </div>
12. <div class="csvs" id="csvs"style="width:200px;">
13. <div style="width:20%;height:85px;float:left;">
14. <p style="margin-top:15px;color:#808080;">進貨筆數</p>
15. </div>
16. <div style="width:20%;height:85px;float:left;border-left:1px solid;color:#808080;">
17. <p style="margin-top:15px;">進貨總額</p>
18. </div>
19. <div style="width:60%;height:85px;float:left;border-left:1px solid;color:#808080;">
20. <p style="float:left;margin-top:15px;">進貨額最高的商品：</p>
21. <p style="margin-top:15px;">供貨額最高的供應商：</p>
22. </div>
23. </div>
24. <script src="~/Plugins/bootstrap-4.1.3-dist/js/bootstrap.js"></script>
25. @*導航條,展開，收起*@
26. <script>
27. // JavaScript Document
28. //1.頁面加載
29. window.onload = function () {
30. //2.獲取頁籤索引的變量
31. var index = 0;
32. // @*展開，收起*@
33. var csvs = document.getElementById("csvs");
34. var gdhdj = document.getElementById("gdhdj");
35. var timer;
36. var h = 1;
37. //綁定鼠標單擊事件
38. gdhdj.onclick = function () {
39. //動畫展開
40. if (gdhdj.innerHTML === "展開統計數據") {
41. csvs.style.height = 85 + "px";
42. gdhdj.innerHTML = "收起統計數據";
43. }
44. //動畫收起
45. else if (gdhdj.innerHTML === "收起統計數據") {
46. csvs.style.height = 1 + "px";
47. gdhdj.innerHTML = "展開統計數據";
48. }
49. };
50. }
51. </script>
52. </body>
53. 完成的效果實例
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
