withorlo withorlo - 1 month ago 14
CSS Question

How to remove anchor from url after checking radio button?

I need to remove an anchor from url or "untarget" the element when i click on radio button.

Here's the code, when i click on a link from the first page i want to have control on specific element on the second page (for example changing font color) but the problem I am struggling with is i can't "untarget" it by using css after i choose sth else from the radio button list and there are simultaneously highlighted two links at the same time.

First page:

<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>


Second page:

<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

It's simple. Attach the first change event of any radio, than remove the hash part from the URL.

Assuming you are using jQuery:

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

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