单击按钮后更改部分URL

Question

我有以下情况：两个类别和一个链接列表。

现在，我需要根据类别更改URL的一部分。 因此使用2个按钮在类别之间切换。 类别A为默认值。

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

在URL结构中，根据单击的按钮，仅类别部分应该有所不同。 URL更改不必立即发生，因此我想使用javascript来完成。

尝试过的东西像

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

但没有运气。

如果有人可以帮助的话会很好

Answer 1

您似乎正在使用jQuery，因此这里是jQuery解决方案。

您可以使用jQuery的.each()遍历每个链接，获取href ，替换类别，然后设置新的href 。

您应该注意，您不能重复id因此我将其更改为class。 这是代码。

$('#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);
    }); 
});

这是更新的html代码，只是将id更改为class。

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

这是一个显示其工作原理的jsfiddle： http : //jsfiddle.net/QaJS9/1/