2

ユーザーが同じページのリンクをクリックした後、ページの領域を強調表示することはできますか? 私は 3 列のレイアウトを使用しており、ページのリンク先の部分は右側にあります。ユーザーが検索するのではなく、すぐに表示されるようにしたいだけです。

ありがとう！

編集：返信ありがとうございます！:target メソッドがどのように機能するかを理解しているので、それを使用する方が良いと思います。私はjqueryの知識がほとんどなく、可能な限りコーディングしているものを理解したいと思っています:-P

4

3 に答える 3

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 に答える