使用className属性实现选项卡的淡入效果

可以通过以下步骤实现选项卡的淡入效果：

1. 在HTML中创建选项卡的标签，每个标签都有一个唯一的ID，以便可以在JavaScript中访问它们。

<div class="tab">
  <button class="tablinks" id="tab1" onclick="openTab(event, 'content1')">Tab 1</button>
  <button class="tablinks" id="tab2" onclick="openTab(event, 'content2')">Tab 2</button>
  <button class="tablinks" id="tab3" onclick="openTab(event, 'content3')">Tab 3</button>
</div>

<div id="content1" class="tabcontent">
  <h2>Tab 1 Content</h2>
  <p>Some text here.</p>
</div>

<div id="content2" class="tabcontent">
  <h2>Tab 2 Content</h2>
  <p>Some text here.</p>
</div>

<div id="content3" class="tabcontent">
  <h2>Tab 3 Content</h2>
  <p>Some text here.</p>
</div>

2. 在CSS中设置默认显示的选项卡和隐藏其他选项卡的内容。

.tabcontent {
  display: none;
}

.active {
  display: block;
}

3. 在JavaScript中编写打开选项卡的函数。该函数将当前选项卡设置为活动状态，并将其他选项卡的内容隐藏。

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

4. 在CSS中添加过渡效果，以使选项卡内容淡入。

.tabcontent {
  display: none;
  transition: opacity 0.5s;
}

.active {
  display: block;
  opacity: 1;
}

现在，当用户点击选项卡按钮时，将会出现淡入效果。