如何为nav-tab的活动选项卡设置样式

为nav-tab的活动选项卡设置样式可以通过以下几种方式实现：

使用CSS样式表：可以通过为活动选项卡添加自定义的CSS类来设置样式。首先，为活动选项卡添加一个唯一的标识符，例如给活动选项卡添加一个class属性值为"active"。然后，在CSS样式表中定义该类的样式，例如设置背景颜色、字体颜色等。示例代码如下：

HTML代码：

<ul class="nav-tab">
  <li class="active">选项卡1</li>
  <li>选项卡2</li>
  <li>选项卡3</li>
</ul>

CSS代码：

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

使用JavaScript：可以使用JavaScript来动态设置活动选项卡的样式。通过给活动选项卡添加一个事件监听器，当选项卡被点击时，使用JavaScript代码来修改其样式。示例代码如下：

HTML代码：

<ul class="nav-tab">
  <li onclick="setActiveTab(this)">选项卡1</li>
  <li onclick="setActiveTab(this)">选项卡2</li>
  <li onclick="setActiveTab(this)">选项卡3</li>
</ul>

JavaScript代码：

function setActiveTab(tab) {
  // 移除所有选项卡的活动样式
  var tabs = document.querySelectorAll('.nav-tab li');
  tabs.forEach(function(tab) {
    tab.classList.remove('active');
  });

  // 设置当前选项卡为活动状态
  tab.classList.add('active');
}