html - 标签在 Blogger 中单击后消失

Question

我的博客 ( http://phobosmoon.blogspot.co.uk ) 上的标签列表有问题。我对其进行了一些调整以使其看起来不错，但是我无法弄清楚单击后如何更改它的外观。目前，如果您单击任何标签（书评、图片等），该标签会完全透明，文本会跳起来并改变颜色，边框和框会消失，看起来真的很奇怪。我可以在 CSS/HTML 的哪个位置更改它？我一直在自学代码，所以我需要分步说明！

谢谢，

乙

Answer 1

您在 上应用了 css .tabs-inner .widget li a，但是当您在相应的页面上时，您将a元素替换为 a 。span您应该向没有链接active的元素添加一个类。li然后将其添加到您的 css 中：

.tabs-inner .widget li a, .tabs-inner .widget li.active {
    /* your code */
}

Answer 2

您的 CSS 样式似乎已应用于 < A > 标记。

确保您为“.tabs-inner .widget li span”创建了一个选定的选项卡样式（看起来链接标记已替换为跨度。）

Answer 3

正在对锚标记链接进行 CSS 样式

.tabs-inner .widget li a {
  display: inline-block;
  padding: .5em 1em;
  margin-right: .25em;
  color: #151537;
  font: normal normal 16px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -goog-ms-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
  border-right: 1px solid #d1d1d1;
}

当您转到特定页面时，以前的锚链接会更改为 aspan 因此，您需要将其添加到样式中

.tabs-inner .widget li a, .tabs-inner .widget li span {
  display: inline-block;
  padding: .5em 1em;
  margin-right: .25em;
  color: #151537;
  font: normal normal 16px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -goog-ms-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
  border-right: 1px solid #d1d1d1;
}

注意：使用 Brewal 的方法是处理这种情况的正确方法。这样，您始终可以对当前样式应用不同的样式active。