<h1>商品推薦</h1> <!-- 這個ul標籤結構負責的是上方切換內容的頁籤按鈕 --> <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist"> <!-- 一個li標籤代青一個頁籤按鈕的範圍 --> <li class="nav-item" role="presentation"> <!-- 注意data-bs-target必須對應到下方要顯示內容的ID名稱 --> <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">天然系列</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">保濕系列</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">精華系列</button> </li> </ul> <div class="tab-content" id="myTabContent"> <!-- 一個tab-pane代表一個頁籤的內容,留意ID名稱不能重複 --> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <div class="container"> <div class="row" data-class="天然系列"> <div class="col-12 col-sm-6 col-md-3"> <img src="img/sec3p1_1.jpg" data-img="sec3p1_1b.jpg" alt="">天然蘆薈洗顏乳 </div> <div class="col-12 col-sm-6 col-md-3"> <img src="img/sec3p1_2.jpg" data-img="sec3p1_2b.jpg" alt="">天然蘆薈化妝水 </div> <div class="col-12 col-sm-6 col-md-3"> <img src="img/sec3p1_3.jpg" data-img="sec3p1_3b.jpg" alt="">天然蘆薈精華乳 </div> <div class="col-12 col-sm-6 col-md-3"> <img src="img/sec3p1_4.jpg" data-img="sec3p1_4b.jpg" alt="">天然蘆薈精華液 </div> </div> </div> </div> <!-- 一個tab-pane代表一個頁籤的內容,留意ID名稱不能重複 --> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <div class="container"> <div class="row" data-class="保濕系列"> <div class="col-12 col-sm-6 col-md-3"> <img src="img/sec3p2_1.jpg" data-img="sec3p2_1b.jpg" alt="">自然保濕洗顏乳 </div> <div class="col-12 col-sm-6 col-md-3"> <img src="img/sec3p2_2.jpg" data-img="sec3p2_2b.jpg" alt="">自然保濕化妝水 </div> <div class="col-12 col-sm-6 col-md-3"> <img src="img/sec3p2_3.jpg" data-img="sec3p2_3b.jpg" alt="">自然保濕精華乳 </div> <div class="col-12 col-sm-6 col-md-3"> <img src="img/sec3p2_4.jpg" data-img="sec3p2_4b.jpg" alt="">自然保濕精華液 </div> </div> </div> </div> <!-- 一個tab-pane代表一個頁籤的內容,留意ID名稱不能重複 --> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"> <div class="container"> <div class="row" data-class="精華系列"> <div class="col-12 col-sm-6 col-md-3"> <img src="img/sec3p3_1.jpg" data-img="sec3p3_1b.jpg" alt="">蒂莫絲精華眼霜 </div> <div class="col-12 col-sm-6 col-md-3"> <img src="img/sec3p3_2.jpg" data-img="sec3p3_2b.jpg" alt="">蒂莫絲特潤精華BB霜 </div> <div class="col-12 col-sm-6 col-md-3"> <img src="img/sec3p3_3.jpg" data-img="sec3p3_3b.jpg" alt="">蒂莫絲特潤精華修護液 </div> <div class="col-12 col-sm-6 col-md-3"> <img src="img/sec3p3_4.jpg" data-img="sec3p3_4b.jpg" alt="">蒂莫絲特潤精華修霜 </div> </div> </div> </div> </div>
#sec3 .nav-tabs { border-bottom: 1px solid transparent; } #sec3 .nav-tabs .nav-link { padding: 0.5rem 1rem; color: var(--c-gray2); font-weight: bold; font-size: min( calc(15px + .15vw) , 18px); } #sec3 .nav-tabs .nav-link:focus, #sec3 .nav-tabs .nav-link:hover { border-color: transparent; color: var(--c-nav-10); } #sec3 .nav-tabs .nav-item.show .nav-link, #sec3 .nav-tabs .nav-link.active { color: var(--c-nav-10); background-color: var(--c-assist2-01); border-color: transparent; }