JS实现的不规则TAB选项卡效果代码

实现不规则TAB选项卡效果需要使用一些CSS和JavaScript技巧，下面是一个完整的攻略。

HTML结构

我们首先要准备一个基本的HTML结构，可以参考以下代码：

<div class="tab-container">
  <div class="tab-buttons">
    <button class="active">Tab 1</button>
    <button>Tab 2</button>
    <button>Tab 3</button>
    <button>Tab 4</button>
  </div>
  <div class="tab-content">
    <div class="tab-panel active">
      <p>Content for Tab 1 goes here.</p>
    </div>
    <div class="tab-panel">
      <p>Content for Tab 2 goes here.</p>
    </div>
    <div class="tab-panel">
      <p>Content for Tab 3 goes here.</p>
    </div>
    <div class="tab-panel">
      <p>Content for Tab 4 goes here.</p>
    </div>
  </div>
</div>

这个结构包含了一个tab-container的容器，其中包含tab-buttons和tab-content两个子容器。tab-buttons包含了所有的tab按钮，而tab-content包含了所有的tab面板。每个按钮和面板都有一个相应的class，用于JavaScript操作。

CSS样式

接下来，我们需要为每个按钮和面板设置一些CSS样式，以使它们按照我们期望的方式显示。可以参考以下代码：

.tab-buttons {
  display: flex;
  flex-wrap: wrap;
}

.tab-buttons button {
  background-color: white;
  border: none;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px 10px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}

.tab-buttons button:hover {
  background-color: #f2f2f2;
}

.tab-buttons .active {
  background-color: #f2f2f2;
}

.tab-content {
  border: 1px solid #ccc;
  padding: 10px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

这里我们对.tab-buttons设置了flex布局以实现自动换行，并设置了按钮的样式，包括颜色、边框、间距等等。对于.tab-panel，我们设置了display:none来让它们默认隐藏，而.active类则表示当前选中的面板需要显示。

JavaScript实现

最后，我们需要使用JavaScript来实现选项卡切换的逻辑，首先需要为每个按钮绑定一个点击事件，然后根据它的index值来切换对应的面板。可以参考以下代码：

const tabButtons = document.querySelectorAll('.tab-buttons button');
const tabPanels = document.querySelectorAll('.tab-panel');

function showPanel(index) {
  // 隐藏所有面板
  tabPanels.forEach(panel => panel.classList.remove('active'));
  // 显示选中的面板
  tabPanels[index].classList.add('active');
}

tabButtons.forEach((button, index) => {
  button.addEventListener('click', () => {
    // 高亮当前选中的按钮
    tabButtons.forEach(button => button.classList.remove('active'));
    button.classList.add('active');
    // 切换对应的面板
    showPanel(index);
  });
});

这个代码使用了forEach和classList等JavaScript方法和属性来实现选项卡切换的逻辑。首先，我们使用querySelectorAll方法获取所有的按钮和面板元素，然后定义一个showPanel函数来切换面板的显示状态。在按钮点击事件中，我们需要高亮当前按钮、切换对应面板展示，并将其余的面板隐藏。

示例

下面是两个示例，一个有4个选项卡，另一个有6个选项卡，它们都使用上面的HTML、CSS和JavaScript代码实现：

示例1

<div class="tab-container">
  <div class="tab-buttons">
    <button class="active">Tab 1</button>
    <button>Tab 2</button>
    <button>Tab 3</button>
    <button>Tab 4</button>
  </div>
  <div class="tab-content">
    <div class="tab-panel active">
      <p>Content for Tab 1 goes here.</p>
    </div>
    <div class="tab-panel">
      <p>Content for Tab 2 goes here.</p>
    </div>
    <div class="tab-panel">
      <p>Content for Tab 3 goes here.</p>
    </div>
    <div class="tab-panel">
      <p>Content for Tab 4 goes here.</p>
    </div>
  </div>
</div>

<script>
const tabButtons = document.querySelectorAll('.tab-buttons button');
const tabPanels = document.querySelectorAll('.tab-panel');

function showPanel(index) {
  // 隐藏所有面板
  tabPanels.forEach(panel => panel.classList.remove('active'));
  // 显示选中的面板
  tabPanels[index].classList.add('active');
}

tabButtons.forEach((button, index) => {
  button.addEventListener('click', () => {
    // 高亮当前选中的按钮
    tabButtons.forEach(button => button.classList.remove('active'));
    button.classList.add('active');
    // 切换对应的面板
    showPanel(index);
  });
});
</script>

示例2

<div class="tab-container">
  <div class="tab-buttons">
    <button class="active">Tab 1</button>
    <button>Tab 2</button>
    <button>Tab 3</button>
    <button>Tab 4</button>
    <button>Tab 5</button>
    <button>Tab 6</button>
  </div>
  <div class="tab-content">
    <div class="tab-panel active">
      <p>Content for Tab 1 goes here.</p>
    </div>
    <div class="tab-panel">
      <p>Content for Tab 2 goes here.</p>
    </div>
    <div class="tab-panel">
      <p>Content for Tab 3 goes here.</p>
    </div>
    <div class="tab-panel">
      <p>Content for Tab 4 goes here.</p>
    </div>
    <div class="tab-panel">
      <p>Content for Tab 5 goes here.</p>
    </div>
    <div class="tab-panel">
      <p>Content for Tab 6 goes here.</p>
    </div>
  </div>
</div>

<script>
const tabButtons = document.querySelectorAll('.tab-buttons button');
const tabPanels = document.querySelectorAll('.tab-panel');

function showPanel(index) {
  // 隐藏所有面板
  tabPanels.forEach(panel => panel.classList.remove('active'));
  // 显示选中的面板
  tabPanels[index].classList.add('active');
}

tabButtons.forEach((button, index) => {
  button.addEventListener('click', () => {
    // 高亮当前选中的按钮
    tabButtons.forEach(button => button.classList.remove('active'));
    button.classList.add('active');
    // 切换对应的面板
    showPanel(index);
  });
});
</script>

注意，这两个示例使用了完全相同的HTML、CSS和JavaScript代码，区别在于有多少个选项卡。而CSS样式和JavaScript逻辑是通用的，可以兼容不同数量的选项卡。