链接到页面并显示特定选项卡内容

<ul class="tabs">
  <li class="tab-link current" data-tab="tab1">选项卡1</li>
  <li class="tab-link" data-tab="tab2">选项卡2</li>
  <li class="tab-link" data-tab="tab3">选项卡3</li>
</ul>

<div id="tab1" class="tab-content current">
  <h2>选项卡1的内容</h2>
  <p>这里是选项卡1的详细内容。</p>
</div>

<div id="tab2" class="tab-content">
  <h2>选项卡2的内容</h2>
  <p>这里是选项卡2的详细内容。</p>
</div>

<div id="tab3" class="tab-content">
  <h2>选项卡3的内容</h2>
  <p>这里是选项卡3的详细内容。</p>
</div>

.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tab-link {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.tab-link.current {
  background-color: #f9f9f9;
}

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

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

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

for (var i = 0; i < tabLinks.length; i++) {
  tabLinks[i].addEventListener('click', function() {
    var tabId = this.getAttribute('data-tab');

    for (var j = 0; j < tabContents.length; j++) {
      tabContents[j].classList.remove('current');
    }

    for (var k = 0; k < tabLinks.length; k++) {
      tabLinks[k].classList.remove('current');
    }

    document.getElementById(tabId).classList.add('current');
    this.classList.add('current');
  });
}