显示/隐藏基于锚点的内容;默认情况下首先显示

Question

使用纯HTML和CSS，可以使用锚标记显示和隐藏内容：

#red { background: red; }
#blue { background: blue; }
#green { background: green; }
.box {
  width: 200px;
  height: 200px;
  display: none;
}
.box:target {
  display: block;
}

<a href="#red">Red item</a> | <a href="#blue">Blue item</a> | <a href="#green">Green item</a>

<div class="box" id="red"></div>
<div class="box" id="blue"></div>
<div class="box" id="green"></div>

但是如何在页面加载时显示第一个（红色）项？

Answer 1

如果您可以修改html，并将红色框放在最后，那么您可以执行以下操作：

#red {
  background: red;
  display: block;
}
#blue { background: blue; }
#green { background: green; }
.box {
  width: 200px;
  height: 200px;
  display: none;
}
.box:target {
  display: block;
}
.box:target ~ #red {
    display: none;
}

Answer 2

解决方案在某种程度上很容易，但我无法在此处显示。如果您在页面中使用此代码，则只需将第一个a标记的锚点附加到网址即可激活其目标。所以你需要简单地做这样的事情：

wwww.page.html#red

以下是结果的屏幕截图：

这可以在不修改代码的情况下工作，您可以选择在开始时显示哪一个。

Answer 3

你可以试试这个：

#red { background: red; display:block;}
#blue { background: blue; }
#green { background: green; }
.box {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
.box:target {
  display: block;
}
.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
}

<a href="#red">Red item</a> | <a href="#blue">Blue item</a> | <a href="#green">Green item</a>

<div class="wrapper">
  <div class="box" id="red"></div>
  <div class="box" id="blue"></div>
  <div class="box" id="green"></div>
</div>

Answer 4

解决方案： -

<style>
#red {
  background: red;
}
#blue {
    background: blue;
}
#green {
    background: green;
}
.box {
  display: none;
}
.box:target {
    display: block;
}

</style>
<a href="#red">Red item</a> | 
<a href="#blue">Blue item</a> | 
<a href="#green">Green item</a>

<div class="box" id="red">Red</div>
<div class="box" id="blue">Blue</div>
<div class="box" id="green">Green</div>

解释： -

I Finally found a solution for your answer but ...
for it to work properly , you need to add a background color ....
finally , I hope that it is what you wanted .....

注释和参考文献： -

currently , i have no references for above codes , 
but ,
NOTE : Please Add Background color fr it to work properly