2

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

谢谢！

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

4

3 回答 3

3

使用伪类在:target样式表中选择它以突出显示。

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

和

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

和

div:target { background: yellow; }

在您的样式表中

于 2013-04-29T21:39:55.947 回答
0

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

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

这是一个示例：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;
}
于 2013-04-29T21:59:06.430 回答
0

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

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

JS 小提琴演示

您还可以使用动画或 css 过渡来显示具有背景颜色的效果。

于 2013-04-29T21:38:15.573 回答