如何设置激活的css选项卡菜单？

设置激活的CSS选项卡菜单可以通过以下步骤实现：

HTML结构：创建一个包含选项卡标题和内容的容器。每个选项卡标题都是一个链接或按钮，与相应的内容部分关联。

<div class="tab-container">
  <a href="#tab1" class="tab-link active">Tab 1</a>
  <a href="#tab2" class="tab-link">Tab 2</a>
  <a href="#tab3" class="tab-link">Tab 3</a>

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

CSS样式：定义选项卡标题和内容的样式，并设置激活状态的样式。

.tab-link {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  color: #000;
  text-decoration: none;
}

.tab-link.active {
  background-color: #f00;
  color: #fff;
}

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

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

JavaScript交互：使用JavaScript代码为选项卡标题添加点击事件，切换激活状态和显示对应的内容。

const tabLinks = document.querySelectorAll('.tab-link');
const tabContents = document.querySelectorAll('.tab-content');

tabLinks.forEach((link) => {
  link.addEventListener('click', (e) => {
    e.preventDefault();

    // 移除所有选项卡的激活状态
    tabLinks.forEach((link) => {
      link.classList.remove('active');
    });

    // 隐藏所有选项卡的内容
    tabContents.forEach((content) => {
      content.classList.remove('active');
    });

    // 设置当前选项卡为激活状态
    const selectedTab = document.querySelector(link.getAttribute('href'));
    link.classList.add('active');
    selectedTab.classList.add('active');
  });
});

通过以上步骤，就可以实现一个带有激活状态的CSS选项卡菜单。用户点击不同的选项卡标题时，对应的内容会显示出来，并且激活状态的选项卡标题会有不同的样式。

腾讯云相关产品和产品介绍链接地址：