js中的tab标签

let str = "Hello\tworld!"; // Hello   world! （\t表示一个制表符）
let newStr = str.replace(/\t/g, ' '); // 将制表符替换为空格
console.log(newStr); // 输出: "Hello world!"

let tabSeparatedStr = "apple\tbanana\tcherry";
let fruits = tabSeparatedStr.split('\t'); // 根据制表符分割字符串
console.log(fruits); // 输出: ["apple", "banana", "cherry"]

<div class="tabs">
  <button class="tab-button active" data-tab="tab1">Tab 1</button>
  <button class="tab-button" data-tab="tab2">Tab 2</button>
</div>

<div class="tab-content">
  <div id="tab1" class="tab-pane active">Content for Tab 1</div>
  <div id="tab2" class="tab-pane">Content for Tab 2</div>
</div>

.tabs {
  display: flex;
}

.tab-button {
  padding: 10px;
  cursor: pointer;
}

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

.tab-pane {
  display: none;
}

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

document.querySelectorAll('.tab-button').forEach(button => {
  button.addEventListener('click', () => {
    // 移除所有按钮的active类
    document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
    // 隐藏所有内容面板
    document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));

    // 给点击的按钮添加active类
    button.classList.add('active');
    // 显示对应的内容面板
    document.getElementById(button.dataset.tab).classList.add('active');
  });
});