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，所以我把它们改成了类。这是代码。

$('#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更改为类。

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

按钮点击后更改网址的一部分

1 个答案: