javascript - 选中单选按钮后如何从 url 中删除 anchor ？

Question

当我单击单选按钮时，我需要从 url 中删除 anchor 或“取消定位”元素。

这是代码，当我单击第一页的链接时，我想控制第二页上的特定元素(例如更改字体颜色)，但我遇到的问题是我无法“取消目标” "它是在我从单选按钮列表中选择其他内容后使用 css 实现的，并且同时突出显示了两个链接。

第一页:

<a href="oferta.html">OFERTA</a>

<ul>
  <li><a href="oferta.html#webdesign">webdesign</a></li>
  <li><a href="oferta.html#grafika">grafika</a></li>
  <li><a href="oferta.html#kampania">kampania</a></li>
</ul>

第二页:

<style type="text/css">
  *{
    clear: both;
  }
  label:target{
    color: red;
  }
  #webdesign:target ~ #wd, #grafika:target ~ #gr, #kampania:target ~ #kp{
    visibility: visible;
    z-index: 10;
  }
  input[type=radio]:checked + #webdesign, input[type=radio]:checked + #grafika, input[type=radio]:checked + #kampania{
    color: red;
  }
  input[type=radio]:checked + #webdesign ~ #wd, input[type=radio]:checked + #grafika ~ #gr, input[type=radio]:checked + #kampania ~ #kp{
    visibility: visible;
    z-index: 100;
  }
  #wd, #gr, #kp{
    width: 500px;
    height: 100px;
    visibility: hidden;
    position: absolute;
    z-index: 0;
  }
  #wd{
    background: red;
  }
  #gr{
    background: green;
  }
  #kp{
    background: blue;
  }
</style>

<a href="home.html">HOME</a>


<input type="radio" id="webdesign1" name="labels">
<label for="webdesign1" id="webdesign">webdesign</label>

<input type="radio" id="grafika1" name="labels">
<label for="grafika1" id="grafika">grafika</label>

<input type="radio" id="kampania1" name="labels">
<label for="kampania1" id="kampania">kampania</label>


<div id="wd"></div>
<div id="gr"></div>
<div id="kp"></div>

Answer 1

很简单。附加任何 radio 的第一个 change 事件，而不是从 URL 中删除 hash 部分。

假设您正在使用 jQuery:

$('input:radio').one('change', function(){
  location.hash = '';
});

http://jsbin.com/wesotoh/edit?html,js