JS rewrite every href links by ID

Question

I have a page with <a> tag links directing to JS script (modal windows), but if someone came and has JS turned off, this page won't work.. so I want to make it functionally for both case, JS on and off..

Here's an idea for rewriting "href" links with JS script..

JS off:

<a id="first" href="main.php?page=something">Link</a>

JS on:

<a id="first" href="#something">Link</a>

I try this:

<a id="first" href="main.php?page=something">Link</a>

<script type="text/javascript">
document.getElementById("first").href= "#something";
</script>

but this only add "#something" to file name (example: if file is named something.php, URL gonna be "something.php#something") and not rewrite it..

any suggest for something really simple ? working on ID's, because there are several links need to be rewrited.. and no jQuery pls..

Answer 1

What do you mean? Using your example it rewrites it to #something not something.php#something...

document.getElementById("first").href= "#something";

jsfiddle

Answer 2

Give this a try.

for (var i = 0, links = document.links; i < links.length; ++i) {
    if (links[i].search.indexOf("page=") > -1)
        links[i].href = "#" + links[i].search.split("page=")[1].split("&")[0]
}

http://jsfiddle.net/CByhw/

Answer 3

The easiest way is to add click event to all links which should display modal dialogs.

HTML:

<a href="main.php?page=something" data-modal="something">Link</a>

JavaScript:

var anchors = document.querySelectorAll('a[data-modal]');
for (var i = 0, len = anchors.length; i < len; i++) {
    anchors[i].addEventListener('click', function(e) {
        var modal = this.getAttribute('data-modal');
        showModal(document.getElementById(modal));
        e.preventDefault();
    }, false);
}

DEMO: http://jsfiddle.net/wE3NC/