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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

解決済

4回答

8519閲覧

1つのページで複数の表示方法

YuichiKataoka

総合スコア216

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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グッド

2クリップ

投稿2015/07/28 02:28

編集2015/07/28 10:37

htmlで以下の様なファイル(ファイル名はindex.html)があったとします。

html

1<div class="wrapper1"> 2 表示1 3</div> 4 5<div class="wrapper2"> 6 表示2 7</div> 8 9<div class="wrapper3"> 10 表示3 11</div>

このページへアクセスする際に、以下の様に複数リンクが別ページ(ファイル名はlink.html)にあったとします。

html

1<a href="../index.html">リンクwrapper1だけ表示</a> 2<a href="../index.html">リンクwrapper2だけ表示</a> 3<a href="../index.html">リンクwrapper3だけ表示</a>

上記リンクの例えば、「リンクwrapper1だけ表示」をクリックするとindex.htmlのファイルの
div要素のwrapper1クラスだけを表示して、他のwrapper2、wrapper3は表示しないようにしたいです。

cssで各div要素をdisplay:none;に指定して、javascriptでクリックされたリンクだけblockにしたいのですが
どのようにすれば良いでしょうか?

javascript読むことは出来るのですが、実装の経験が不十分なため、経験と知識のある方ご教授ください。

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

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

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

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

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

guest

回答4

0

一応CSSだけでも可能です

lang

1<!doctype html> 2<style> 3 .x { display: none; } 4 .x:target { display: block; } 5</style> 6 7<a href="#a">A</a> 8<a href="#b">B</a> 9<a href="#c">C</a> 10<div id="a" class="x">aaaaaaaaaa</div> 11<div id="b" class="x">bbbbbbbbbb</div> 12<div id="c" class="x">cccccccccc</div>

投稿2015/07/28 09:15

hello-world

総合スコア1342

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

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

YuichiKataoka

2015/07/28 10:38

回答ありがとうございます。 質問で説明不足の点がありました。リンクはindex.htmlとは別のファイルに記載した場合これをやりたいのです。
guest

0

分岐表示させたい領域を

HTML

1<div id="wrapper1">表示1</div> 2<div id="wrapper2">表示2</div> 3<div id="wrapper3">表示3</div>

のようにclassではなくidで命名しておき、

HTML

1<a href="../index.html#wrapper1">リンクwrapper1だけ表示</a> 2<a href="../index.html#wrapper2">リンクwrapper2だけ表示</a> 3<a href="../index.html#wrapper3">リンクwrapper3だけ表示</a>

のようにhash付きでアンカーリンクさせてやれば、

location.hash

でアンカーの値が取得できますので、
それをトリガーとして表示制御してやればいいのではないでしょうか?
idにできない理由があるならダメですが・・・

参考URL:アンカー(ハッシュ)で処理を分ける

投稿2015/07/28 02:52

aKusano

総合スコア3763

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

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

0

HTML

1<a href="../index.html">リンクwrapper1だけ表示</a> 2<a href="../index.html">リンクwrapper2だけ表示</a> 3<a href="../index.html">リンクwrapper3だけ表示</a>

遷移先の判断材料がこのままだとないので、何かしらのパラメータを付随させる必要があると思います。
リンク形式でやりたいならURL埋め込みとかですね。

その判断材料を使って画面初期表示時イベントでJQueryを使って必要な部分にdisplay:none;を追加する処理を実装といった形になるかと思います。

投稿2015/07/28 02:42

tenraku

総合スコア148

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

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

0

ベストアンサー

phpにして$_GETで受け取るなど考えられますが、JavaScriptで極々簡単に実装するなら以下の通りで出来ます。想定外の入力(page=5など)には対応していませんので改変させてよりいいものに仕上げることをお勧めします。

index.html

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5</head> 6<body> 7 <a href="index2.html?page=1">リンクwrapper1だけ表示</a> 8 <a href="index2.html?page=2">リンクwrapper2だけ表示</a> 9 <a href="index2.html?page=3">リンクwrapper3だけ表示</a> 10</body> 11</html>

index2.html

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5</head> 6<body> 7 <div class="wrapper1" id="wrapper1"> 8 表示1 9 </div> 10 <div class="wrapper2" id="wrapper2"> 11 表示2 12 </div> 13 <div class="wrapper3" id="wrapper3"> 14 表示3 15 </div> 16<script> 17(function(document){ 18 if (location.search.length > 1) { 19 var page = location.search.substr(1); 20 if (page == 'page=1') { 21 document.getElementById('wrapper2').style.display = 'none'; 22 document.getElementById('wrapper3').style.display = 'none'; 23 } else if (page == 'page=2') { 24 document.getElementById('wrapper1').style.display = 'none'; 25 document.getElementById('wrapper3').style.display = 'none'; 26 } else if (page == 'page=3') { 27 document.getElementById('wrapper1').style.display = 'none'; 28 document.getElementById('wrapper2').style.display = 'none'; 29 } 30 } 31})(document); 32</script> 33</body> 34</html>

投稿2015/07/28 02:51

rik

総合スコア1151

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

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

YuichiKataoka

2015/07/28 13:53

ちょうどやりたいことが出来ました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問