index.html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>首页</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  9. <style>
  10. .box{width:1200px;height:960px;}
  11. .header{width:100%;background:rgba(0, 3, 143, 1);color:white;padding: 1px;}
  12. .content{width:100%;height:800px;box-sizing: content-box;border: 1px solid;}
  13. .left{
  14. float:left;
  15. width:15%;
  16. height:100%;
  17. background:rgba(242, 242, 242, 1);
  18. }
  19. .left p{
  20. width: 100%;
  21. text-align: center;
  22. font-size: 18px;
  23. color: #797979;
  24. }
  25. .show button{
  26. margin-top: 3%;
  27. color: white;
  28. background: rgba(22, 155, 213, 1);
  29. width: 6%;
  30. border-radius: 5px;
  31. margin-left: 3%;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div class="box">
  37. <div class="header"><h1>微博数据分析</h1></div>
  38. <div class="content">
  39. <div class="left">
  40. <p><span style="background:rgb(215,215,215)"; onclick="changeIframe(this,'WBAccount')">微博号管理</span></p>
  41. <p><span onclick="changeIframe(this,'WBData')">微博数据分析</span></p>
  42. <p><span onclick="changeIframe(this,'Comment')">微博评论爬虫</span></p>
  43. </div>
  44. <div class="right">
  45. <iframe src="account.html" frameborder="0" style="
  46. height: 800px;
  47. width: 85%;"></iframe>
  48. </div>
  49. </div>
  50. </div>
  51. </body>
  52. </html>
  53. <script>
  54. changeIframe=function(wt,el){
  55. let span=$("span");
  56. for(let i=0;i<span.length;i++){
  57. span[i].style.background="rgba(242, 242, 242, 1)";
  58. }
  59. wt.style.background="rgb(215,215,215)";
  60. let _href=el+".html";
  61. let iframe=$("iframe")[0];
  62. iframe.src=_href;
  63. }
  64. </script>