如何在另一个 div 成为目标时受到影响

How to get another div affected when another one is targeted 

/* Header styles */

* {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header {
  background-color: aqua;
  text-align: center;
  padding: 20px 0px;
}

header a {
  font-size: xx-large;
  margin: 10px;
  text-decoration: none;
  color: black;
  background-color: cyan;
  font-weight: bolder;
  padding: 0px 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header a:hover {
  background-color: darkcyan;
  color: white;
}


/* Header Styles End */


/* --- */


/* Sections Style */

#gallery,
#about,
#contact {
  display: none;
}

main {
  padding: 25px;
  background-color: aliceblue;
  margin: 10px;
}

#img {
  width: 100px;
  height: 100px;
}

#gallery:target {
  display: block !important;
}

#gallery:target~#home {
  display: none !important;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <a href="#home">Home</a>
    <a href="#gallery">Gallery</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </header>
  <main>
    <div id="home">
      <h1>
        Welcome To the Web Page where there at 4 sections! -
        <font size="10" color="grey">Home</font>
      </h1>
      <h2>Click them to see their relevant sections!</h2>
      <p>
        Here's a bunch of Lorem to make it seems a bit big. Better know Latin! Here it comes! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint blanditiis nulla mollitia quam, sequi consectetur, asperiores itaque minus ut, soluta obcaecati inventore
        hic natus dolorem. Repellendus vero optio temporibus esse. A few more. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolores amet saepe dignissimos, eligendi non sint nobis! Dignissimos, eligendi non sint nobis! Lorem Ipsum
        Dolor sit amet consectetur
      </p>
      <h2>And that's it, Here's a soothing gif</h2>
      <img src="https://i.pinimg.com/originals/4c/ba/93/4cba9388025117cb8c60a4f8610f90f5.gif" width="300">
    </div>
    <div id="gallery">
      <h1>Here's the gallery! Sorry...The images aren't available at the moment</h1>
    </div>
    <div id="#about"></div>
    <div id="#contact"></div>
  </main>
</body>

</html>

您好。我有 2 个 ID 为#home 和#gallery 的 DIV。当我单击画廊时，我希望隐藏主页部分并显示画廊。我将 id gallery 设置为 display:none;，然后使用伪选择器 :target 将其设置为 display:block...像这样

#gallery {
    display: none;

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>/* Header styles */
* {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
header {
    background-color: aqua;
    text-align: center;
    padding: 20px 0px;
}
header a{
    font-size: xx-large;
    margin: 10px;
    text-decoration: none;
    color: black;
    background-color:cyan;
    font-weight: bolder;
    padding: 0px 15px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
header a:hover {
    background-color: darkcyan;
    color: white;
}
/* Header Styles End */
/* --- */
/* Sections Style */
#gallery, #about, #contact {
    display: none;
}
main {
    padding: 25px;
    background-color: aliceblue;
    margin: 10px;
}
#img {
    width: 100px;
    height: 100px;
}
#gallery:target {
    display: block !important;
}
#gallery:target ~ #home {
    display: none !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <a href="#home">Home</a>
        <a href="#gallery">Gallery</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </header>
    <main>
        <div id="home">
            <h1>
                Welcome To the Web Page where there at 4 sections! - 
                <font size="10" color="grey">Home</font>
            </h1>
            <h2>Click them to see their relevant sections!</h2>
            <p>
                Here's a bunch of Lorem to make it seems a bit big. Better know Latin! Here it comes! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint blanditiis nulla mollitia quam, sequi consectetur, asperiores itaque minus ut, soluta obcaecati inventore hic natus dolorem. Repellendus vero optio temporibus esse. A few more. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolores amet saepe dignissimos, eligendi non sint nobis! Dignissimos, eligendi non sint nobis! Lorem Ipsum Dolor sit amet consectetur
            </p>
            <h2>And that's it, Here's a soothing gif</h2>
            <img src="https://i.pinimg.com/originals/4c/ba/93/4cba9388025117cb8c60a4f8610f90f5.gif" width="300">
        </div>
        <div id="gallery">
            <h1>Here's the gallery! Sorry...The images aren't available at the moment</h1>
        </div>
        <div id="#about"></div>
        <div id="#contact"></div>
    </main>
</body>
</html>
} #gallery:target { display: block !important; }

它确实有效，但图库部分会在主页部分下方 弹出。我想要的是主页部分必须隐藏，或者用技术术语来说，display:none 所以我希望主页部分受到目标#gallery 的影响。我试过这个

#gallery:target ~ home {
    display: none !important;
}

但它不起作用。这是一张图片，以防您无法理解布局

没有目标#gallery

以#gallery为目标

如果你能回答这个问题，请告诉我...

您可以为此功能使用一些 JavaScript。单击图库文本或主页文本时，以下代码会运行一个函数。它本质上所做的是隐藏所有其他部分，除了它应该显示的部分。这些函数将 hide class 添加到所有部分，隐藏它们，除了需要显示的部分。

function showHome() {
  sections.forEach(s => s.classList.add("hide"));
  home.classList.remove("hide");
}

function showGallery() {
  sections.forEach(s => s.classList.add("hide"));
  gallery.classList.remove("hide");
}

const home = document.getElementById("home");
const gallery = document.getElementById("gallery");
const sections = document.querySelectorAll(".section");

.hide {
  display: none !important;
}

.section {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#home {
 background-color: green;
}

#gallery {
 background-color: blue;
}

<div>
  <p onclick="showHome()">Home</p>
  <p onclick="showGallery()">Gallery</p>
</div>
<div class="section" id="home">
  <p>This is home!</p>
</div>
<div class="section hide" id="gallery">
  <p>This is gallery!</p>
</div>