Question

用户点击同页链接后是否可以突出显示页面区域？我使用3列布局，我链接的页面部分位于右侧。我只是想确保用户立即看到它，而不是必须寻找它。

谢谢！

编辑：感谢您的回复！我认为最好使用：target方法，因为我了解它是如何工作的。我对jquery知之甚少，并且更愿意理解我正在编码的内容:-P

Answer 1

使用the :target pseudo-class在样式表中选择它以突出显示。

<a href="#foo">Link</a>

和

<div id="foo">content here</div>

和

div:target { background: yellow; }

样式表中的

Answer 2

您可以使用javascript或Jquery来实现此目的。使用类似这样的代码

$("#link").click(function(){
    $("#myDivToShow").css("background-color","maroon");
});

JS Fiddle Demo

您也可以使用动画或css过渡来显示背景色效果。

Answer 3

除了其他答案之外，是的，您可以使用CSS执行此操作：active，：hover，但这意味着：

使用绝对位置将列嵌套在导航中
必须手动指定列的高度或使其相对于其中的内容。

以下是一个示例： http://jsbin.com/upapey/2/edit

以及稍后参考的代码：

HTML：

<body>
  <div id="wrapper">
    <div id="nav">
      <a href="#col_1">Col 1
        <div id="col_1" class="col"></div>
      </a>
      <a href="#col_2">Col 2
        <div id="col_2" class="col"></div>
      </a>
      <a href="#col_3">Col 3
        <div id="col_3" class="col"></div>
      </a>
    </div>
  </div>
</body>

CSS：

#wrapper {
  width: 100%;
  height: 100%;
}
#nav {
  width: 100%;
}
a {
  display: block;
  float: left;
  margin-right: 10px;
}
div.col {
  position: absolute;
  width: 30%;
  min-height: 320px;
  max-height: 2000px;
  border: 1px solid blue;
  cursor: default !important;
  margin-top: 10px;
}
div#col_2 {
  margin-left: 25%;
}
div#col_3 {
  margin-left: 50%;
}
/* a:hover must be before a:active, else the latter won't be triggered */
a:hover .col { 
  border: 1px solid green;
}
a:active .col {
  border: 1px solid red;
}

用户点击同页链接后是否可以突出显示页面区域？

3 个答案: