質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

5回答

6161閲覧

JQueryもしくはJSで2つのボタンで2つの表示を切り替えたい

test_87097

総合スコア45

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/06/13 12:18

編集2018/06/14 04:33

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
が表示されてあとはリンクを押すたびに切り替えをさせたいのですが、なかなかうまくいきません。

お手数ですがご教授いただければ幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

何でもかんでも id つけるのはやめましょう。メンテナンス性が損なわれます。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div class="sample"> 9 <div> 10 <a href="javascript:void(0);">リンク1</a> 11 </div> 12 <div> 13 <a href="javascript:void(0);">リンク2</a> 14 </div> 15 </div> 16 17 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 18 <script type="text/javascript"> 19 $(".sample > div > a").on('click', function () { 20 // .sample > div を全て表示 21 $(".sample > div").show(); 22 // クリックした a 要素の親 div を非表示 23 $(this).parent("div").hide(); 24 }); 25 </script> 26 </body> 27</html> 28

投稿2018/06/13 12:40

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

JavaScript

1$(function() { 2 $('#open2').hide(); 3 4 $(document).on('click', '[id^="view"]>[id^="open"]', function(event) { 5 $(this).hide().parent().siblings('[id^="view"]').children('[id^="open"]').show(); 6 event.preventDefault(); 7 }); 8});

投稿2018/06/14 04:32

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

解決出来ました。
回答ありがとうございました。

投稿2018/06/14 07:54

test_87097

総合スコア45

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

toggleClassの方がすっきりしますけど、わかりやすいのでこれがおすすめです。

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>

css

1#view2 { 2 display:none; 3}

javascript

1$("#view1").on("click", function() { 2 $("#view1").css('display','none'); 3 $("#view2").css('display','block'); 4}); 5 6$("#view2").on("click", function() { 7 $("#view2").css('display','none'); 8 $("#view1").css('display','block'); 9});

投稿2018/06/13 12:36

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

1を押されたら2のvisibilityをvisible、1をhiddenに、
2はその逆になるようにコーディングすればいいかと思います。
display:noneでもOKです(少し表示の動作が異なります)

投稿2018/06/13 12:21

shinobu_osaka

総合スコア456

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問