2017-06-17 11 views
-1

私はJqueryとJavascriptで新しいです。私はthisの例を変更しようとしていました:w3schoolsは最初からURLに変更します:www.w3schools.comwww.w3schools.com/jqueryそしてもう一度最初のものにクリックしてくださいボタンを(何度も)何回も押すことができますが、私はそれを行う方法を理解することはできません。答えにすべてのコードを含めると、より簡単になります。ありがとう。あなただけの場合は、他の基本を使用してhref属性を確認することができます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答えは何の理由もない(おそらくボット*によって)downvotedされていたとにかく、あなたの質問に答える。他の質問は、あなたが与えたコードをコピーして答えに入れることだけです。 –

+0

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

答えて

1

まずホバーbuttonリンクの変更をクリックした後あなたが表示されますリンク.​​.. www.w3school.com .... ...あなたがチェックすることができますそれは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つの投票を与える:) –

1

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

関連する問題