furniture_design.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <div class="furniture-design">
  2. <section class="bhouseweb_loc_banner">
  3. <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
  4. </section>
  5. <!-- 手機版型 -->
  6. <div class="mobile-tab d-block d-md-none">
  7. <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
  8. <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
  9. <li class="nav-item tab-item" role="presentation">
  10. <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
  11. </li>
  12. <li class="nav-item tab-item" role="presentation">
  13. <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
  14. </li>
  15. <li class="nav-item tab-item" role="presentation">
  16. <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
  17. </li>
  18. </ul>
  19. </div>
  20. <!-- 電腦版型 -->
  21. <div class="d-none d-md-block">
  22. <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
  23. <li class="nav-item" role="presentation">
  24. <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link design-border">全部設計單品</a>
  25. </li>
  26. <li class="nav-item tab-item" role="presentation">
  27. <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
  28. </li>
  29. <li class="nav-item tab-item" role="presentation">
  30. <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
  31. </li>
  32. <li class="nav-item tab-item" role="presentation">
  33. <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
  34. </li>
  35. </ul>
  36. </div>
  37. <div class="bhouseweb_loc_content">
  38. <ul class="design-list mb-3 m-md-0">
  39. <li><a id="sofa" class="nav-link" href="/furniture_design/sofa/">沙發</a></li>
  40. <li><a id="side_table" class="nav-link" href="/furniture_design/side_table">茶几</a></li>
  41. <li><a id="dining_table" class="nav-link" href="/furniture_design/dining_table">餐桌</a></li>
  42. <li><a id="dining_chair" class="nav-link" href="/furniture_design/dining_chair">餐椅/中島椅</a></li>
  43. <li><a id="mattress" class="nav-link" href="/furniture_design/mattress/">床組</a></li>
  44. <li><a id="cabinet" class="nav-link" href="/furniture_design/cabinet">電視櫃</a></li>
  45. <li><a id="wardrobe" class="nav-link" href="/furniture_design/wardrobe">衣櫃/收納櫃/中島</a></li>
  46. <li><a id="Side_Cabinet" class="nav-link" href="/furniture_design/side_cabinet">邊櫃/邊几</a></li>
  47. <li><a id="desk" class="nav-link" href="/furniture_design/desk">書桌/工作桌</a></li>
  48. <li><a id="other_furniture" class="nav-link" href="/furniture_design/other_furniture">其他設計單品</a></li>
  49. </ul>
  50. </div>
  51. <div style="border-top: 1px solid grey; position: absolute; width: 100%; left: 0;"></div>
  52. </div>
  53. <script>
  54. // 儲存點擊的 Link ID 後加上 Class Name
  55. // 預設沙發頁
  56. if (window.location.pathname === '/furniture_design/sofa/') {
  57. localStorage.setItem('assignLink', 'sofa');
  58. }
  59. let linkList = document.querySelectorAll(".furniture-design .nav-link");
  60. for (let i = 0; i < linkList.length; i++) {
  61. linkList[i].addEventListener("click", function (e) {
  62. console.log('e.target.id',e.target.id);
  63. localStorage.setItem('assignLink', e.target.id);
  64. });
  65. }
  66. let linkID = localStorage.getItem('assignLink');
  67. let link = document.querySelector(`.design-list #${linkID}`);
  68. link.classList.add("assign-link");
  69. </script>