<style>

  /* 頁籤外框 */

  .tab-container {

    width: 100%;

    max-width: 600px;

    margin: 20px auto;

    font-family: sans-serif;

  }

  /* 按鈕橫條 */

  .tab-menu {

    display: flex;

    justify-content: center;

    border-bottom: 2px solid #e0e0e0;

    margin-bottom: 20px;

    padding: 0;

    list-style: none;

  }

  /* 單個按鈕樣式 */

  .tab-item {

    padding: 10px 20px;

    cursor: pointer;

    font-size: 16px;

    font-weight: 500;

    color: #666666;

    border-bottom: 2px solid transparent;

    margin-bottom: -2px; /* 壓在框線上 */

    transition: all 0.3s ease;

  }

  /* 當前被選中的按鈕樣式（高亮） */

  .tab-item.active {

    color: #333333;

    font-weight: bold;

    border-bottom: 2px solid #333333; /* 底線顏色，可換成品牌的代表色 */

  }

  /* 內容區塊預設隱藏 */

  .tab-content {

    display: none;

    animation: fadeInTab 0.4s ease; /* 切換時帶有一點點微漸顯，質感更好 */

  }

  /* 當前被選中的內容（顯示） */

  .tab-content.active {

    display: block;

  }

  /* 漸顯動畫 */

  @keyframes fadeInTab {

    from { opacity: 0; transform: translateY(5px); }

    to { opacity: 1; transform: translateY(0); }

  }

</style>

<div class="tab-container">

  <ul class="tab-menu">

    <li class="tab-item active" onclick="switchTab(event, 'content-A')">凝膠美甲</li>

    <li class="tab-item" onclick="switchTab(event, 'content-B')">半永久定妝</li>

    <li class="tab-item" onclick="switchTab(event, 'content-C')">美睫服務</li>

  </ul>

  <div id="content-A" class="tab-content active">

    <div style="text-align: center; padding: 20px;">

      <img src="https://cdn.store-assets.com/s/619339/f/16118641.png" style="width: 100%; max-width: 300px; margin-bottom: 15px;">

      <p>這是【凝膠美甲】的詳細介紹與價目表內容...</p>

    </div>

  </div>

  <div id="content-B" class="tab-content">

    <div style="text-align: center; padding: 20px;">

      <img src="https://cdn.store-assets.com/s/619339/f/16118633.png" style="width: 100%; max-width: 300px; margin-bottom: 15px;">

      <p>這是【半永久定妝】的詳細介紹與價目表內容...</p>

    </div>

  </div>

  <div id="content-C" class="tab-content">

    <div style="text-align: center; padding: 20px;">

      <img src="https://cdn.store-assets.com/s/619339/f/16118650.png" style="width: 100%; max-width: 300px; margin-bottom: 15px;">

      <p>這是【美睫服務】的詳細介紹與價目表內容...</p>

    </div>

  </div>

</div>

<script>

  function switchTab(event, tabId) {

    // 1. 抓取所有的內容區塊和按鈕

    const contents = document.querySelectorAll('.tab-content');

    const tabs = document.querySelectorAll('.tab-item');

    // 2. 清除所有顯示狀態

    contents.forEach(content => content.classList.remove('active'));

    tabs.forEach(tab => tab.classList.remove('active'));

    // 3. 讓被點擊的按鈕和對應的內容顯示出來

    document.getElementById(tabId).classList.add('active');

    event.currentTarget.classList.add('active');

  }

</script>