js怎么實(shí)現(xiàn)簡潔的選項(xiàng)卡效果

實(shí)現(xiàn)簡潔的選項(xiàng)卡效果可以使用以下步驟：

1. 首先，在HTML中創(chuàng)建選項(xiàng)卡的結(jié)構(gòu)，例如：

<div class="tab-container">
  <div class="tab">
    <button class="tab-btn active" data-tab="tab1">Tab 1</button>
    <button class="tab-btn" data-tab="tab2">Tab 2</button>
    <button class="tab-btn" data-tab="tab3">Tab 3</button>
  </div>
  <div class="tab-content" id="tab1">Tab 1 content</div>
  <div class="tab-content" id="tab2" style="display: none;">Tab 2 content</div>
  <div class="tab-content" id="tab3" style="display: none;">Tab 3 content</div>
</div>

2. 然后，在CSS中定義選項(xiàng)卡的樣式，例如：

.tab-btn {
  background-color: #f1f1f1;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.tab-btn.active {
  background-color: #ddd;
}

.tab-content {
  display: none;
  padding: 10px;
}

3. 最后，在JavaScript中實(shí)現(xiàn)選項(xiàng)卡的切換效果，例如：

const tabs = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const tabId = tab.getAttribute('data-tab');
    
    tabs.forEach(t => t.classList.remove('active'));
    tab.classList.add('active');
    
    tabContents.forEach(content => {
      if (content.id === tabId) {
        content.style.display = 'block';
      } else {
        content.style.display = 'none';
      }
    });
  });
});

通過以上步驟，就可以實(shí)現(xiàn)一個(gè)簡潔的選項(xiàng)卡效果。點(diǎn)擊不同的選項(xiàng)卡按鈕時(shí)，對應(yīng)的內(nèi)容會顯示出來，其他選項(xiàng)卡內(nèi)容會隱藏起來。