Question

我试图弄清楚如何在不重新加载页面的情况下即时更改超链接。我想最好的例子就是这个网站在这个页面上的表现：

http://www.namearoo.com/?q=tree+trimming

所有链接都会根据您选择的选项而变化。我想在我的网站上做类似的事情，但我不知道它是如何完成的。我想用jQuery做点什么：

$('.mylink').click(function(){

    //Some code..?

});

Answer 1

更改所需锚元素的href属性

$("a").prop("href", "http://www.google.com/")

我为您创建了 jsfiddle ，请看一下。

HTML：

<div id="links"> 
 <a data-curent-ext="com" href="http://www.google.com">google.com</a>
 <a data-curent-ext="com" href="http://www.yahoo.com">yahoo.com</a>
 <a data-curent-ext="com" href="http://www.bingo.com">bingo.com</a>
</div>
<br/>
<div class="triggers"> 
 <a class="change" data-url-ext="rs" href="#">rs</a>
 <a class="change" data-url-ext="bla" href="#">bla</a>
</div>

Jquery的：

$('.triggers').on('click', '.change', function () {

    var urlExt = $(this).data('url-ext');

    $('#links').find('a').each(function () { 

        var self = $(this);
        var cExt = self.attr("data-curent-ext");

        self.attr({'href': function() {            
            return this.href.replace(cExt, urlExt); 
        }, "data-curent-ext": urlExt}).text(function( index ) {
          return this.text.replace(cExt, urlExt);
        });
    });
});

Answer 2

老实说，我不能确切地说出你想要的功能，但是要创建类似于网站上的内容，我只是将切换事件添加到click事件中。所以它看起来像这样：

HTML

<div id="div1">some link</div>
<div id="div2">some other link</div>

的JavaScript

// hides the second div initially
$("#div2").toggle();

//switches the divs on click
$( "#div1" ).click(function() {
 $("#div1").toggle();
 $("#div2").toggle();
});

Answer 3

试试这个

<input type="button" class="extension" value=".com" />
<input type="button" class="extension" value=".net" />
<input type="button" class="extension" value=".info" />
<input type="button" class="extension" value=".org" />
<br><br>
<a href="www.example.com" id="myLink" >www.example.com</a>

$(".extension").click(function() {
    var defaultAddress = "www.example";
    $("#myLink")[0].href = defaultAddress + this.value;
    $("#myLink")[0].innerText = defaultAddress + this.value;
});

Fiddle

没有jQuery

var extensions = document.getElementsByClassName("extension");

for (var i = 0; i < extensions.length; i++) {
    extensions[i].onclick = function() {
        var defaultAddress = "www.example";
        var myLink = document.getElementById("myLink");
        myLink.href = defaultAddress + this.value;
        myLink.innerText = defaultAddress + this.value;
    }
}

Fiddle

如何在不重新加载页面的情况下单击按钮时更改超链接

3 个答案: