JS实现Tab内容切换，页面不刷新，内容切换，网址变化

在JavaScript中，实现Tab内容切换而不刷新整个页面通常使用的是动态网页技术，其中最常用的就是`<div>`元素配合JavaScript的DOM操作。你可以通过以下几个步骤来完成：

1. **HTML结构**：首先，创建一个包含多个`<div>`标签的容器，每个`<div>`代表一个Tab页的内容，给它们加上不同的`id`标识，并在一个外部的`<div>`或`<ul>`中添加Tab链接。

<ul id="tabNav">
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>

<div id="contentContainer">
  <div id="tab1" class="tabContent hidden">
    Tab 1 Content
  </div>
  <div id="tab2" class="tabContent">
    Tab 2 Content
  </div>
  <div id="tab3" class="tabContent">
    Tab 3 Content
  </div>
</div>

2. **CSS样式**：隐藏除第一个Tab之外的内容，并设置`.hidden`类以隐藏内容。

.tabContent {
  display: none;
}

.tabContent.active {
  display: block;
}

3. **JavaScript处理**：使用`addEventListener`监听`<ul>`中的点击事件，切换对应的`<div>`的显示状态。

document.getElementById('tabNav').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认行为，防止跳转

  const tabLinks = document.querySelectorAll('#tabNav a');
  const contentContainers = document.querySelectorAll('#contentContainer .tabContent');

  tabLinks.forEach(link => link.classList.remove('active'));
  const clickedLink = e.target;
  clickedLink.classList.add('active');

  let activeContentIndex = Array.from(contentContainers).indexOf(document.querySelector(`#${clickedLink.hash.substring(1)}`));
  if (activeContentIndex !== -1) {
    contentContainers[activeContentIndex].classList.remove('hidden');
  }
});

现在，当用户点击Tab导航时，相应的内容就会切换，而URL不会发生变化（实际上，由于`#`后的部分只用于锚点定位），浏览器地址栏只会显示出当前激活的Tab的ID。