单击按钮后更改部分URL

Question

i have following Situation: Two Categories and one list of links.

Now i Need to Change a part of the URL, according to the category. Used therefore 2 Buttons, to Switch between the categories. Category A is Default.

<button id="Tab1">CategoryA</button>
<button id="Tab2">CategoryB</button>

<a id="link" href="http://www.test.com/CategoryA/Type1" target="_blank">Type1</a>
<a id="link" href="http://www.test.com/CategoryA/Type2" target="_blank">Type2</a>
<a id="link" href="http://www.test.com/CategoryA/Type3" target="_blank">Type3</a>

Inside the URL structure only the Category Part should differ, according to which button was clicked. The URL change hast to happen immediately, so I thought to do it with javascript.

Tried Stuff like

$('#Tab1').on ('click', function (e) {
      link.href.replace.... 

but had no luck with it.

Would be nice if some could help

Answer 1

You seem to be using jQuery, so here is a jQuery solution.

You can use jQuery's .each() to loop through each link, get the href , replace the category and then set the new href .

You should note that you cannot have repeating id s so I have changed them to classes. Here's the code.

$('#Tab1').on('click', function (e) {
    $( ".link" ).each(function( index ) {
        var newLink=$(this).attr("href").replace("CategoryB","CategoryA");
        $(this).attr("href", newLink);
    });
});

$('#Tab2').on('click', function (e) {
    $( ".link" ).each(function( index ) {
        var newLink=$(this).attr("href").replace("CategoryA","CategoryB");
        $(this).attr("href", newLink);
    }); 
});

and here's the updated html code, just with the ids changed to classes.

<button id="Tab1">CategoryA</button>
<button id="Tab2">CategoryB</button>

<a class="link" href="http://www.test.com/CategoryA/Type1" target="_blank">Type1</a>
<a class="link" href="http://www.test.com/CategoryA/Type2" target="_blank">Type2</a>
<a class="link" href="http://www.test.com/CategoryA/Type3" target="_blank">Type3</a>

Here's a jsfiddle showing it working: http://jsfiddle.net/QaJS9/1/