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

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

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

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

2895閲覧

エラーは消えたけど...。

asakura238

総合スコア62

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/02/11 14:17

編集2016/02/11 14:24

タブの切り替えをやりたいです。
jsの部分がうまくいかないです。
何かいい案ありますでしょうか。
よろしくお願いします。

html

1<html> 2<head> 3<title>test</title> 4<link rel="stylesheet" type="text/css" href="test.css" /> 5<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 6</head> 7<body> 8<div class="mail"> 9 <div class="meun"> 10 <div class="link1">a</div> 11 <div class="link2">a</div> 12 <div class="link3">a</div> 13 <div class="link4">a</div> 14 </div> 15 16 <div id="section1">a </div> 17 <div id="section2">a </div> 18 <div id="section3">a </div> 19 <div id="section4">a </div> 20 21</div> 22<script type="text/javascript" src="test.js"></script> 23 24</body> 25</html>

css

1 2.body{ 3} 4 5.mail{ 6 width:996px; 7 margin:0 auto 0 auto !important; 8} 9 10#meun{ 11 display: table-cell; 12} 13 14.link1{ 15 width:249px; 16 height:95px; 17 background:#EBCF01; 18 float: left; 19} 20 21 22.link2{ 23 background:#007DD4; 24 height:95px; 25 width:249px; 26 float: left; 27 28} 29 30 31.link3{ 32 background:#A52B36; 33 height:95px; 34 width:249px; 35 float: left; 36 37} 38 39 40.link4{ 41 background:#7CBB00; 42 height:95px; 43 width:249px; 44 float: left; 45 46} 47 48 49#section1{ 50 background:#EBCF01; 51 width:996px; 52 height:996px; 53 display:block; 54} 55 56#section2{ 57 background:#007DD4; 58 width:996px; 59 height:996px; 60 display:none; 61} 62 63#section3{ 64 background:#A52B36; 65 width:996px; 66 height:996px; 67 display:none; 68} 69 70#section4{ 71 background:#7CBB00; 72 width:996px; 73 height:996px; 74 display:none; 75}

javascript

1var tsgu1=document.getElementById('section1').offsetHeight; 2var tsgu2=document.getElementById('section2').offsetHeight; 3var tsgu3=document.getElementById('section3').offsetHeight; 4var tsgu4=document.getElementById('section4').offsetHeight; 5//上記で高さを取得しておき、後でclass="link*"がクリックされた時にif文で高さが無い場合は 6//CSSのdisplay:none→display:blockするみたいな。やりたい。 7$("section1").click(function() {test();}); 8$("section2").click(function() {test();}); 9$("section3").click(function() {test();}); 10$("section4").click(function() {test();}); 11//上記で関数呼び出して 12$(function test() { 13 if(tagu1==0){document.getElementById("section1").style.display="none";} 14 if(tagu2==0){document.getElementById("section2").style.display="none";} 15 if(tagu3==0){document.getElementById("section3").style.display="none";} 16 if(tagu4==0){document.getElementById("section4").style.display="none";} 17 if(tagu1!=0){document.getElementById("section1").style.display="block";} 18 if(tagu2!=0){document.getElementById("section2").style.display="block";} 19 if(tagu3!=0){document.getElementById("section3").style.display="block";} 20 if(tagu4!=0){document.getElementById("section4").style.display="block";} 21//的な? 22}); 23

無理ですかね...。

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

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

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

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

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

guest

回答4

0

自分で書く場合はこのような感じになります。
show()hide()はdisplayをnoneかそれ以外に切り替えるjQueryのメソッドです。

HTML

1<div class="mail"> 2 <ul class="menu"> 3 <li class="tab link1"><a href="#section1">tab1</a></li> 4 <li class="tab link2"><a href="#section2">tab2</a></li> 5 <li class="tab link3"><a href="#section3">tab3</a></li> 6 <li class="tab link4"><a href="#section4">tab4</a></li> 7 </ul> 8 9 <div id="section1" class="tabContent">section1</div> 10 <div id="section2" class="tabContent">section2</div> 11 <div id="section3" class="tabContent">section3</div> 12 <div id="section4" class="tabContent">section4</div> 13</div>

CSS

1.mail{ 2 width:996px; 3 margin:0 auto 0 auto !important; 4} 5.menu{ 6 margin: 0; 7 padding: 0; 8 display: table; 9} 10.tab { 11 width:249px; 12 height:95px; 13 display: table-cell; 14} 15.tab > a { 16 display: block; 17 height: 100%; 18} 19.link1{ 20 background:#EBCF01; 21} 22.link2{ 23 background:#007DD4; 24} 25.link3{ 26 background:#A52B36; 27} 28.link4{ 29 background:#7CBB00; 30} 31 32.tabContent { 33 width:996px; 34 height:996px; 35} 36 37#section1{ 38 background:#EBCF01; 39} 40#section2, 41#section3, 42#section4 { 43 display:none; 44} 45#section2{ 46 background:#007DD4; 47} 48#section3{ 49 background:#A52B36; 50} 51#section4{ 52 background:#7CBB00; 53}

JavaScript

1var switchTab = function(){ 2 /* 操作対象の取得 */ 3 var $tab = $('.tab').find('a'), 4 $content = $('.tabContent'); 5 6 /* タブ切り替え処理をするための関数 */ 7 var tabAct = function(tab){ 8 var $clickTab = $(tab), // クリックしたタブの取得。 9 targetId = $clickTab.attr('href'), // クリックしたタブからhref属性を取得 10 $target = $(targetId); // 上記IDを元に取得すると、切り替え先のコンテンツが取れる。 11 12 $content.hide(); // 一旦全部のタブコンテンツをを対象に消す操作を実行。 13 $target.show(); // 切り替え先のコンテンツを表示する。 14 }; 15 16 /* イベントとの関連付け */ 17 $tab.on('click', function(e){ 18 e.preventDefault(); 19 tabAct(this); 20 }); 21}; 22 23$(function(){ 24 switchTab(); //実行 25});

投稿2016/02/11 15:07

編集2016/02/11 15:09
yamato_hikawa

総合スコア2092

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

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

asakura238

2016/02/13 06:47

ありがとうございます。jQueryの方も勉強しようと思います。
guest

0

ベストアンサー

主な修正点はclassを変えることによって表示を切り替えてるところとJqueryの知識がないので全部素のjavascriptで書いてるところでしょうか?

追記
今更ながらjquery-uiを少し調べてみたんですが・・・
特に理由が(勉強とか)無ければjquery-ui使ったほうがいいですね
業務等での利用なら(手間暇的に)圧倒的だと思います
とはいえ事情が分からないのであえて自分で書いてみるのも間違いではないと思います

html

1<!DOCTYPE html> 2<html> 3<head> 4<title>test</title> 5<link rel="stylesheet" type="text/css" href="./css/Sample1.css" /> 6<script type="text/javascript" src="./js/Sample1.js"></script> 7</head> 8<body> 9<div class="mail"> 10 <div class="meun"> 11 <div class="link1" data-link="section1">a</div> 12 <div class="link2" data-link="section2">a</div> 13 <div class="link3" data-link="section3">a</div> 14 <div class="link4" data-link="section4">a</div> 15 </div> 16 17 <div id="section1" class="block">a </div> 18 <div id="section2" class="fade">a </div> 19 <div id="section3" class="fade">a </div> 20 <div id="section4" class="fade">a </div> 21 22</div> 23 24</body> 25</html>

javascript

1//data-link属性を指定されているelementを探し、イベントを貼り付ける 2function searchDataLink(n){ 3 if(n.nodeType==1){ 4 //呼び出し 5 if(!(typeof n.dataset.link==="undefined")){ 6 n.addEventListener("click",function (){ linkStart(this) },false); 7 } 8 } 9 var children=n.childNodes; 10 for(var i=0;i<children.length;i++){ 11 searchDataLink(children[i]); 12 } 13 return; 14} 15//class="block"を探し出し、class="fade"にする 16function searchAndHide(){ 17 var block=document.getElementsByClassName("block"); 18 for(var i=0;i<block.length;i++){ 19 block[i].className="fade"; 20 } 21} 22// 23function linkStart(n){ 24 25 searchAndHide(); 26 27 //data-link属性に指定されているIDのクラスをblockに書き換える 28 var blockElement=n.dataset.link; 29 var blockElement=document.getElementById(blockElement); 30 blockElement.className="block"; 31} 32//メイン 33function main(){ 34 35searchDataLink(document.body); 36 37 38} 39window.addEventListener("load",main,false);

css

1.body{ 2} 3 4.mail{ 5 width:996px; 6 margin:0 auto 0 auto !important; 7} 8 9#meun{ 10 display: table-cell; 11} 12 13.link1{ 14 width:249px; 15 height:95px; 16 background:#EBCF01; 17 float: left; 18} 19 20 21.link2{ 22 background:#007DD4; 23 height:95px; 24 width:249px; 25 float: left; 26 27} 28 29 30.link3{ 31 background:#A52B36; 32 height:95px; 33 width:249px; 34 float: left; 35 36} 37 38 39.link4{ 40 background:#7CBB00; 41 height:95px; 42 width:249px; 43 float: left; 44 45} 46 47 48#section1{ 49 background:#EBCF01; 50 width:996px; 51 height:996px; 52} 53 54#section2{ 55 background:#007DD4; 56 width:996px; 57 height:996px; 58} 59 60#section3{ 61 background:#A52B36; 62 width:996px; 63 height:996px; 64} 65 66#section4{ 67 background:#7CBB00; 68 width:996px; 69 height:996px; 70} 71.mail .fade{ 72 display:none; 73} 74.mail .block{ 75 display:block; 76} 77

投稿2016/02/11 18:21

編集2016/02/12 13:57
gyojin

総合スコア94

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

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

asakura238

2016/02/13 06:43

ありがとうございます。DOMについてはまだ理解が足りませんが、頑張って勉強したいと思います。
guest

0

jQuery UI の tabs() 使うのでは駄目なのですか。

投稿2016/02/11 14:30

unau

総合スコア2468

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

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

asakura238

2016/02/13 06:49

ありがとうございます。楽な方法もあるのですね。
guest

0

無理です。

jquery-ui か、w2ui をオススメします。
あなたがやろうとしてるめんどくさい部分をすべてコイツらライブラリが吸収してくれます。

追記

ライブラリを使わずに、敢えて基礎を学ぼうという意思があるならば、、、、、、
面倒くさいからやっぱりライブラリ使って手抜きしましょう。

投稿2016/02/11 14:25

編集2016/02/11 14:27
ipadcaron

総合スコア1693

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

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

asakura238

2016/02/13 06:50

ありがとうございます。w2uiはまったく知らないので、調べてみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問