2017-06-17 87 views
-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>

+0

首先哈弗鏈接,你會看到... www.w3school.com ....點擊按鈕鏈接變更後.. 。你可以檢查它 –

+0

@Miguel通過回答似乎沒有理由(*也許由機器人*),無論如何它回答你的問題。其他問題只是複製您提供的代碼並將其置於答案中。 –

+0

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

回答

1

首先哈弗鏈接,你會看到... 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>

+0

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

+2

這幾乎是我已經給出的確切答案。 –

+0

是的,它的工作正常...我檢查了..但誰給你投票。等等..我給你一個投票從我身邊:) –

1

你可以只使用一個基本的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>

+0

爲什麼選票過低?這是目前唯一正確的答案。 –

+0

你測試過這個代碼嗎? –

+0

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