HTML
1<div id="view1"> 2<a id="open1" href="javascript:void(0);">リンク1</a> 3</div> 4<div id="view2"> 5<a id="open2" href="javascript:void(0);">リンク2</a> 6</div>
上記のようなリンクが2つ表示されるようなHTMLを
・初期の状態ではリンク1だけが表示され、<div id="view2">に囲まれたリンク2は非表示
・リンク1をクリックすると<div id="view1">に囲まれたリンク1が非表示になりリンク2が表示
・リンク2をクリックすると<div id="view2">に囲まれたリンク2が非常時になりリンク1が表示
・以下表示非表示をリンクをクリックするごとに繰り返す
上記が目指す動きですが、初期でリンク2を非表示にしてリンク1を表示させておき、
その後リンクをクリックすることに表示非表示にさせる方法がわからなくて困っています。
上記の動作になるようなJQueryもしくはJSを教えていただけると非常に助かります。
よろしくお願いします。
6/14 追記
ご回答ありがとうございます。
頂いた回答を元に自分なりに書いてみたのですが、なかなかうまくいきません。
JavaScript
1<script type="text/javascript"> 2function open1(){ 3 document.getElementById("modal-txt1").style.display="none"; 4 document.getElementById("modal-txt2").style.display="block"; 5} 6function open2(){ 7 document.getElementById("modal-txt1").style.display="block"; 8 document.getElementById("modal-txt2").style.display="none"; 9} 10</script>
HTML
1<div id="modal-txt1"> 2初期表示 3<a onclick="open1()" href="javascript:void(0);">リンク1</a> 4</div> 5<div id="modal-txt2" style="display:none;"> 6切り替え表示先 7<a onclick="open1()" href="javascript:void(0);">リンク2</a> 8</div>
最初は
初期表示
リンク1
が表示されて、リンク1をクリックすると
切り替え表示先
リンク2
が表示されてあとはリンクを押すたびに切り替えをさせたいのですが、なかなかうまくいきません。
お手数ですがご教授いただければ幸いです。
回答5件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。