Question

我一直在网站上制作标签菜单。非常简单的功能：每个选项卡都包含图像，只有在单击右侧选项卡时才会显示这些图像。这是我参加的在线课程，我们应该只用css来做这件事。我遇到的问题是我无法在默认情况下显示第一个标签，如果我这样做就不会消失（css不会覆盖显示：阻止）以及是否＆＃ 39;默认隐藏，我不尊重课程的要求。

我是这样做的：

CSS

#tabmenu > div {
  display: none;
}

#tabmenu > a {
  position:relative;
  left:35%;
  text-decoration: none;
  background-color: rgb(229,229,229);
  color: rgb(100,104,109);
  padding: 15px 15px 15px 15px;
  font-family: 'faw',sans-serif;
  margin:-3px -3px -3px -3px ;
  top:-50px;
}

#tabmenu > a:hover, #tabmenu > a:active {
  background-color: rgb(92,173,211);
  color: white;
  box-shadow: 0px 3px rgb(62,143,181);
}

#tabmenu > a:hover:after, #tabmenu > a:active:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border-top: 10px solid rgb(62,143,181);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transform: translateX(-50%);
}

#tous:target {
  display: block;
  position: relative;
  top:20px;
}

#sobres:target {
  display: block;
  position: relative;
  top: 20px;
}

#imaginatifs:target {
  display: block;
  position: relative;
  top: 20px;
}

#classiques:target {
  display: block;
  position: relative;
  top: 20px;
}

和HTML

<div id="tabmenu" class="greyBg">
  <a href="#tous" class="sel">Tous</a>
  <a href="#sobres" class="sel">Sobres</a>
  <a href="#imaginatifs" class="sel">Imaginatifs</a>
  <a href="#classiques" class="sel">Classiques</a>

  <div id="tous">
    <div class="icontain">
      <div class="icaption">
        <img class="pico" src="images/ico/eye.png" alt="ico">
        <h3>Image 1</h3>
        <p>©WebAgency</p>
      </div>
      <img src="images/portfolio/01.jpg" alt="ico">
    </div>
  </div>

  <div id="sobres">
    <div class="icontain">
      <div class="icaption">
        <img class="pico" src="images/ico/eye.png" alt="ico">
        <h3>Image 5</h3>
        <p>©WebAgency</p>
      </div>
      <img src="images/portfolio/05.jpg" alt="ico">
    </div>
  </div>

</div><!-- #tabmenu -->

我只包含两个标签和图片，但你明白了（不要让这个长5页）

无论如何，#tous标签应该是默认显示的标签，在用户点击任何内容之前，我无法弄清楚。

正如我所说，我必须只在CSS中执行此操作，我知道JS和jQuery可以轻松解决这个问题（我很乐意这样做）。

Answer 1

由于:target的工作方式，我强调从网址的哈希部分中选择的项目，唯一没有JavaScript解决方案就是用这样的网址打开你的演示。

在您的情况下，例如：http://name.github.io/demo#tous。该网址默认包含#tous。希望这会有所帮助。

纯css默认状态覆盖

1 个答案: