Clickable links without anchors

Question

In my incremental game code someone asked me to replace my anchors with divs or spans. I tried this but then I was no longer able to click on my "tabs" to cycle through content. is there another way to get rid of the anchors so the page does not move down each time an anchored href is clicked.

example index:

<div class="tabs">

    <ul>
        <li><a href="#locations">LOCATIONS</a></li>     
        <li><a href="#crafting">CRAFTING</a></li>
        <li><a href="#upgrades">UPGRADES</a></li>
        <li><a href="#stats">STATS</a></li>
    </ul>

example css:

.tabs a {
    text-decoration: none;
    display: block;
    background: #000000;
    padding: 0.10em 0.80em;
    color: #145266;
    width: 6em;
    text-align: center;
}

I tried replacing the a with div but then the clickable area became dormant. But when I used the same method to replace the anchored content in the "tabInner" Everything worked fine because all my content inside has an onclick="CONTENT".

Does this mean I have to make an onclick on locations, crafting, upgrades, and stats?

Source Code - http://hexmerchant.github.io/

How did it work when it was still an ``? It doesn't do anything apart from jumping to the anchor, so how did it change tabs? Did it have an event already? Short answer to your question: Yes. A div doesn't do anything by itself, so logically you would have to bind an event handler if you want it to respond to an event. — GolezTrol, Jan 02 '15 at 19:50
@GolezTrol Ok, I'll try focusing my time on figuring out a way to stop the page from scrolling down each time they click on them instead. Thanks. full source code here - http://hexmerchant.github.io/ — Hex Merchant, Jan 02 '15 at 19:53
The page doesn't have to move if you use CSS `:target` selector. https://developer.mozilla.org/en-US/docs/Web/CSS/:target or you can use input radio buttons like here: http://codepen.io/ziga-miklic/pen/Fagmh — Deryck, Jan 02 '15 at 19:53
If you already have an onclick event then try just adding `return false;` — imtheman, Jan 02 '15 at 19:54
Just place "javascript:void(0)", in href tag if you want to stop scrolling with onClick — NullPointerException, Jan 02 '15 at 19:56
possible duplicate of [Make a div into a link](http://stackoverflow.com/questions/796087/make-a-div-into-a-link) — Adam, Jan 02 '15 at 20:02
Consider something like `document.getElementById("toprow").scrollIntoView();` when a link is clicked within `
` — Weather Vane, Jan 02 '15 at 20:05
@WeatherVane I probably placed what you considered wrongly into my code xD, but I just found that the issue only occurs to people who don't full screen the game with a 1920x1080 display. was testing things out. — Hex Merchant, Jan 02 '15 at 20:48
@NullPointerException does this work with anchors or only with javascrpit(s)? — Hex Merchant, Jan 02 '15 at 20:48
in your CSS you would match up the ID with it so CSS declared inside of `#locations:target { }` will be applied to the element with the `#locations` ID but only when the URL has `#locations` at the end. — Deryck, Jan 02 '15 at 21:01
This may be a little more fun to read for you and explain it better than I can: http://css-tricks.com/on-target/ — Deryck, Jan 02 '15 at 21:01

score 0 · Accepted Answer · answered Jan 03 '15 at 04:08

Found a youtube tutorial that help me fix the issue

<ul class="tabs">
    <li>
        <input type="radio" name="tabs" id="tab-1" checked>
        <label for ="tab-1">LOCATIONS</label>
        <div class="tab-content">
        <p> Blarg auefohaoehfouaheoufhaouehfouaehfouahefouaheoufhauoehfouaheufhauoefhoauehfuoahefouhaeuofh</p>
        </div>
    </li>

.tabs {
list-style-type: none;
padding:0;
margin:0;
position:relative;
}
.tabs:after {
content: "";
clear:both;
display:block;
height:242px;
}
.tabs li {
float:left;
}
.tabs li > input {
display:none;
}
.tabs li > label {
display:inline-block;
border:2px solid #2182A3;
border-right-width:0;
border-bottom-width:0;
height:30px;
line-height:30px;
padding: 5px 20px;
cursor:pointer;
}
.tabs li:last-child > label {
border-right-width:1px;
}
.tabs .tab-content {
display:none;
position:absolute;
left:0;
padding:20px;
border:2px solid #2182A3;
height:200px;
overflow-y:scroll;
}

/* Functional */

.tabs li > input:checked + label {
background-color: #006680
}

.tabs li > input:checked ~ .tab-content {
display:block;
}

Clickable links without anchors

1 Answers1