New-Bhouse-Web/themes/hugo-universal-theme-master/layouts/partials/furniture_design.html

<div class="furniture-design">
  <section class="bhouseweb_loc_banner">
    <img src="/img/banner/bn_product@2x.png" class="banner-img card-img" alt="...">
  </section>
  <!-- 手機版型 -->
  <div class="mobile-tab d-block d-md-none">
    <div class="row">
      <div class="col-4 m-auto all-tab">
        <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
      </div>
    </div>

  
    <!-- <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a> -->
    <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
      <!-- <li class="nav-item tab-item" role="presentation">
        <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link">全部設計單品</a>
      </li> -->
      <div class="row w-100">
        <div class="col-4">
          <li class="nav-item tab-item" role="presentation">
            <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
          </li>
        </div>
        <div class="col-4">
          <li class="nav-item tab-item" role="presentation">
            <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
          </li>
        </div>
        <div class="col-4">
          <li class="nav-item tab-item" role="presentation">
            <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
          </li>
        </div>
      </div>
      <!-- <li class="nav-item tab-item" role="presentation">
        <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
      </li> -->
      <!-- <li class="nav-item tab-item" role="presentation">
        <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
      </li>
      <li class="nav-item tab-item" role="presentation">
        <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
      </li> -->
    </ul>
  </div>
  <!-- 電腦版型 -->
  <div class="d-none d-md-block">
    <ul class="nav nav-pills mt-0 mt-lg-4 justify-content-center tab-title b-bottom" id="pills-tab" role="tablist">
      <li class="nav-item" role="presentation">
        <a href="/furniture_design/sofa" id="all-design-tab" class="nav-link design-border">全部設計單品</a>
      </li>
      <li class="nav-item tab-item" role="presentation">
        <a href="/system_furniture" id="systeam-furniture-tab" class="nav-link">關於系統櫃</a>
      </li>
      <li class="nav-item tab-item" role="presentation">
        <a href="/solid_wood_furniture" id="furniture-tab" class="nav-link">關於家具</a>
      </li>
      <li class="nav-item tab-item" role="presentation">
        <a href="/about_mattress" id="mattress-tab" class="nav-link">關於床墊</a>
      </li>
    </ul>
  </div>

  <div class="bhouseweb_loc_content">
    <ul class="design-list mb-3 m-md-0">
      <li><a id="sofa" class="nav-link" href="/furniture_design/sofa/">沙發</a></li>
      <li><a id="side_table" class="nav-link" href="/furniture_design/side_table">茶几</a></li>
      <li><a id="dining_table" class="nav-link" href="/furniture_design/dining_table">餐桌</a></li>
      <li><a id="dining_chair" class="nav-link" href="/furniture_design/dining_chair">餐椅/中島椅</a></li>
      <li><a id="mattress" class="nav-link" href="/furniture_design/mattress/">床組</a></li>
      <li><a id="cabinet" class="nav-link" href="/furniture_design/cabinet">電視櫃</a></li>
      <li><a id="wardrobe" class="nav-link" href="/furniture_design/wardrobe">衣櫃/收納櫃/中島</a></li>
      <li><a id="Side_Cabinet" class="nav-link" href="/furniture_design/side_cabinet">邊櫃/邊几</a></li>
      <li><a id="desk" class="nav-link" href="/furniture_design/desk">書桌/工作桌</a></li>
      <li><a id="other_furniture" class="nav-link" href="/furniture_design/other_furniture">其他設計單品</a></li>
    </ul>
  </div>

  <div style="border-top: 1px solid grey; position: absolute; width: 100%; left: 0;"></div>
</div>

<script>
  // 儲存點擊的 Link ID 後加上 Class Name
    // 預設沙發頁
    if (window.location.pathname === '/furniture_design/sofa/') {
      localStorage.setItem('assignLink', 'sofa');
    }

    let linkList = document.querySelectorAll(".furniture-design .nav-link");
    for (let i = 0; i < linkList.length; i++) {
      linkList[i].addEventListener("click", function (e) {
        console.log('e.target.id',e.target.id);
        localStorage.setItem('assignLink', e.target.id);
      });
    }

    let linkID = localStorage.getItem('assignLink');
    let link = document.querySelector(`.design-list #${linkID}`);
    link.classList.add("assign-link");
  
</script>