如何实现未定位时显示首页div，定位其他div时隐藏？

你的核心问题是：当URL带有锚点时，首页的display:block样式未被覆盖，导致首页和目标标签页同时显示。以下是两种非JS解决方案：

方案一：现代浏览器（支持:has()选择器） #

无需调整HTML结构，仅修改CSS即可实现需求：

.tabcontent {
  display: none;
}

/* 默认状态下显示首页 */
.home {
  display: block;
}

/* 当页面锚点目标不是首页时，隐藏首页 */
:root:has(:target:not(.home)) .home {
  display: none;
}

/* 显示被锚点定位的标签页内容 */
.tabcontent:target {
  display: block;
}

如果需要给首页添加切换按钮，只需给首页div加上id="home"，再添加链接：

<a href="#home"><button>Home</button></a>

方案二：兼容旧浏览器（无需:has()） #

通过调整HTML结构，利用CSS通用兄弟选择器实现：

调整后的HTML #

把首页div放到所有标签页内容的最后：

<div>
  <a href="#div01"><button>Div 01</button></a>
  <a href="#div02"><button>Div 02</button></a>
  <!-- 可选：添加首页切换按钮 -->
  <a href="#home"><button>Home</button></a>
</div>
<div id="div01" class="tabcontent">
  <p>So this is the div 01 content...</p>
</div>
<div id="div02" class="tabcontent">
  <p>And this is div 02 content!</p>
</div>
<div id="home" class="home tabcontent">
  <p>So this is the home page...</p>
</div>

对应CSS #

.tabcontent {
  display: none;
}

/* 默认显示首页 */
.home {
  display: block;
}

/* 当任意标签页被锚点定位时，隐藏后面的首页 */
.tabcontent:target ~ .home {
  display: none;
}

/* 显示被锚点定位的内容 */
.tabcontent:target {
  display: block;
}

原理说明 #

• 默认状态下，所有.tabcontent隐藏，仅.home通过类选择器的优先级显示。
• 当URL带有锚点时，被定位的.tabcontent:target会被设置为display:block。
• 方案一中的:root:has(:target:not(.home))检测页面是否存在非首页的锚点目标，若存在则隐藏首页；方案二则通过兄弟选择器~，在目标标签页被定位时隐藏其后的首页。

内容的提问来源于stack exchange，提问作者Bailey - Jay