withorlo withorlo - 2 months ago 27
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>

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

Second page:

<style type="text/css">
clear: both;
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;
background: red;
background: green;
background: blue;

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


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 = '';