如何使用JQuery动态更改URL

-1

我是Jquery和Javascript的新手。我正在尝试修改this示例：w3schools将URL从最初的www.w3schools.com更改为第二个：www.w3schools.com/jquery并返回到最初的一次，当点击按钮（尽可能多次），但我不知道如何去做。请在答案中包含所有代码，这会更容易。谢谢。如何使用JQuery动态更改URL

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 
    </script> 
 
    <script> 
 
     $(document).ready(function(){ 
 
$("button").click(function(){ 
 
    $("#w3s").attr("href", "https://www.w3schools.com/jquery"); 
 
}); 
 
}); 
 
    </script> 
 
</head> 
 
<body> 
 
    <p> 
 
     <a href="https://www.w3schools.com" id="w3s"> 
 
      W3Schools.com 
 
     </a> 
 
    </p> 
 
    <button> 
 
     Change href Value 
 
    </button> 
 
    <p> 
 
     Mouse over the link (or click on it) to see that the value of the href attribute has changed. 
 
    </p> 
 
</body> 
 
</html>

来源

2017-06-17 Jorge M. Nures

首先哈弗链接，你会看到... www.w3school.com ....点击按钮链接变更后.. 。你可以检查它 –

@Miguel通过回答似乎没有理由（*也许由机器人*），无论如何它回答你的问题。其他问题只是复制您提供的代码并将其置于答案中。 –

https://www.w3schools.com/code/tryit.asp?filename=FGOSUXX5HUOG –

首先哈弗链接，你会看到... www.w3school.com ....点击button链路变化后...您可以检查它与hover的链接。工作环节为toggle

https://www.w3schools.com/code/tryit.asp?filename=FGOSUXX5HUOG

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p> 
 

 
<button>Change URL</button> 
 

 
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p> 
 

 

 
<script> 
 
$(document).ready(function(){ 
 

 
    $("button").click(function(){ 
 
    
 
     var myURL = "https://www.w3schools.com"; 
 
     if($("#w3s").attr("href") === myURL) 
 
     $("#w3s").attr("href", "https://www.w3schools.com/jquery"); 
 
     else 
 
     $("#w3s").attr("href", myURL); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 

 

 
</body> 
 
</html>

来源

2017-06-17 18:54:56

https://www.w3schools.com/code/tryit.asp?filename=FGOSUXX5HUOG –

这几乎是我已经给出的确切答案。 –

是的，它的工作正常...我检查了..但谁给你投票。等等..我给你一个投票从我身边:) –

你可以只使用一个基本的if-else和检查href属性。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     var w3schoolURL = "https://www.w3schools.com"; 
 
     if($("#w3s").attr("href") === w3schoolURL) 
 
     $("#w3s").attr("href", "https://www.w3schools.com/jquery"); 
 
     else 
 
     $("#w3s").attr("href", w3schoolURL); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p> 
 

 
<button>Change href Value</button> 
 

 
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p> 
 

 
</body> 
 
</html>

来源

2017-06-17 18:24:44

为什么选票过低？这是目前唯一正确的答案。 –

你测试过这个代码吗？ –

@ Roxy'Pro是的，它工作正常。您可以运行该代码段并确认，但我的答案始终没有问题。 –

-1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<script> 
 
$(document).ready(function(){ 
 
\t var w3 = "https://www.w3schools.com"; 
 
\t var w3Jquery = "https://www.w3schools.com/jquery"; 
 
\t var toggleFlag = true; 
 
    $("button").click(function(){ 
 
     if(toggleFlag){ 
 
     \t $("#w3s").attr("href", w3Jquery); 
 
     } 
 
     else{ 
 
     \t $("#w3s").attr("href", w3); \t 
 
     } 
 
     toggleFlag = !toggleFlag; 
 
    }); 
 
}); 
 
</script> 
 

 
<body> 
 
<p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p> 
 

 
<button>Change href Value</button> 
 

 
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p> 
 

 
</body>

来源

2017-06-17 18:28:48 rgetty

如何使用JQuery动态更改URL

回答

相关问题