header.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. header {
  10. width: 100%;
  11. height: 110px;
  12. background-color: #fff;
  13. position: fixed;
  14. top: 0;
  15. left: 0;
  16. color: #333;
  17. font-size: 16px;
  18. z-index: 100;
  19. }
  20. header img {
  21. width: 86px;
  22. height: 86px;
  23. margin: 12px;
  24. }
  25. header .right {
  26. height: 86px;
  27. }
  28. header .right span {
  29. margin-left: 105px;
  30. cursor: pointer;
  31. }
  32. header .right span.active {
  33. color: #D4AA68;
  34. position: relative;
  35. }
  36. header .right span.active::after {
  37. content: '';
  38. position: absolute;
  39. left: 0;
  40. bottom: -44px;
  41. width: 100%;
  42. border: 2px solid #D4AA68;
  43. background: #D4AA68;
  44. }
  45. .flexB {
  46. display: flex;
  47. align-items: center;
  48. justify-content: space-between;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <header>
  54. <div class="banxin flexB">
  55. <div class="logo">
  56. <img src="./img/logo.png" alt=""/>
  57. </div>
  58. <div class="right flexB">
  59. <span id="index">首页</span>
  60. <span id="brand">品牌荣誉</span>
  61. <span id="notice">新闻动态</span>
  62. <span id="goods">产品介绍</span>
  63. <span id="bussiness">招商加盟</span>
  64. <span id="contact">联系我们</span>
  65. </div>
  66. </div>
  67. </header>
  68. </body>
  69. <script src="./js/jquery.js"></script>
  70. <script>
  71. $(function () {
  72. let name0 = window.location.href;
  73. let names = name0.split('/')
  74. let real_name = names[names.length - 1];
  75. let target = real_name.split('.')[0];
  76. $('#' + target).addClass('active')
  77. $('span').click(function () {
  78. $(this).addClass('active').siblings().removeClass('active')
  79. window.location.href = "./" + $(this).attr('id') + '.html'
  80. })
  81. if (!target) {
  82. $('#index').addClass('active')
  83. return
  84. }
  85. if (target.indexOf('noticeDetail') != -1) {
  86. $('#notice').addClass('active')
  87. return
  88. }
  89. })
  90. </script>
  91. </html>