0

我一直在网站上制作标签菜单。非常简单的功能：每个选项卡都包含图像，并且仅在单击右侧选项卡时才会出现。这是针对我正在学习的在线课程的，我们应该只使用 css 来完成。我遇到的问题是我无法默认显示第一个选项卡，如果我这样做它不会消失（css不会覆盖显示：块），如果它默认隐藏，我不尊重课程要求。

我是这样做的：

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 会为我轻松解决此问题（我很乐意这样做）。

4

1 回答 1

0

由于这种方式:target有效，即它从 url 的哈希部分突出显示所选项目，唯一没有 JavaScript 的解决方案是用这样的 url 打开你的演示。

在您的情况下，例如：http://name.github.io/demo#tous. url#tous默认包含。希望这可以帮助。

于 2018-04-26T20:58:15.593 回答