- 締切済み
リンクをクリックすると複数コンテンツが切り替わる×9 javascri
リンクをクリックすると複数コンテンツが切り替わる×9 javascript 参考サンプル http://gootara-illustration.hp.infoseek.co.jp/tag_sample/tab_sample.html このようなスイッチ切り替えのモノを9組同じページで可能なjavascriptを探しています。 初心者の私にも分かるように説明していただけないでしょうか？ 前回スレ http://okwave.jp/qa/q6023200.html ここで http://www.kminek.pl/lab/yetii/ と言うサイトを紹介してもらったのですが 海外サイトで翻訳通しても カスタマイズの仕方がいまいち分かりませんでした。 （バカです。） 直接、scriptの改造の仕方か もう少し分かりやすいサイトを教えてください。 どうぞよろしくお願いします。
- gootara_illust
- お礼率12% (1/8)
- JavaScript
- 回答数7
- ありがとう数3
- みんなの回答 （7）
- 専門家の回答
みんなの回答
- my--
- ベストアンサー率89% (91/102)
>>No.6 DOM要素のプロパティになってしまってるのがちょっとアレか。（独り言） 一応訂正しておきます。 // 改変ここから var group = getElementsByClass('div', 'group'); // グループリスト var len = group.length; for (var k = 0; k < len; k++) { // 切り替え用テキストが書かれた要素、span class="switched-text"を抽出[ var obj = {}; obj.elem = group[k]; obj.elS = getElementsByClass.call(obj.elem, 'span', 'switched-text'); obj.elS_2 = getElementsByClass.call(obj.elem, 'span', 'switched2-text'); obj.elS_3 = getElementsByClass.call(obj.elem, 'span', 'switched3-text'); // 切り替えボタンの要素、div class="switch-text"を抽出してonclickイベントを追加 // 追記：span要素に変更しています getElementsByClass.call(obj.elem, 'span', 'switch-text', function(i) { var self = obj; this.onclick = function() { addClassName('display-none', self.elS); removeClassName('display-none', self.elS[i]); addClassName('display-none', self.elS_2); removeClassName('display-none', self.elS_2[i]); addClassName('display-none', self.elS_3); removeClassName('display-none', self.elS_3[i]); }; }); } // 改変ここまで 以下変更なし http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1132011731 スクリプトの出所はここですか。
- my--
- ベストアンサー率89% (91/102)
http://gootara-illustration.hp.infoseek.co.jp/tag_sample/js/tabs.js グループ化して処理できるように改変しています。 //----- スクリプトはここから ----- // CSS document.write( '<style type="text/css">' + '.display-none { display: none; }' + 'span.switch-text { cursor: pointer; text-decoration: underline; }' + '</style>' ); (function() { var l = function () { // 改変ここから var group = getElementsByClass('div', 'group'); // グループリスト var len = group.length; var elem; for (var k = 0; k < len; k++) { // 切り替え用テキストが書かれた要素、span class="switched-text"を抽出 elem = group[k]; elem.elS = getElementsByClass.call(elem, 'span', 'switched-text'); elem.elS_2 = getElementsByClass.call(elem, 'span', 'switched2-text'); elem.elS_3 = getElementsByClass.call(elem, 'span', 'switched3-text'); // 切り替えボタンの要素、div class="switch-text"を抽出してonclickイベントを追加 // 追記：span要素に変更しています getElementsByClass.call(elem, 'span', 'switch-text', function(i) { var self = elem; this.onclick = function() { addClassName('display-none', self.elS); removeClassName('display-none', self.elS[i]); addClassName('display-none', self.elS_2); removeClassName('display-none', self.elS_2[i]); addClassName('display-none', self.elS_3); removeClassName('display-none', self.elS_3[i]); }; }); } // 改変ここまで 以下変更なし // クラス名を追加する関数。 // className: 追加したいクラス名 // el: クラス名を追加する要素（または要素のリスト） html: <div class="group"><!-- グループ化 --> ～ <div> <div class="group"><!-- グループ化 --> ～ <div>
- fujillin
- ベストアンサー率61% (1594/2576)
数はいくつでも可 レイアウトはしてないので適宜やってください 文字数制限のため説明はなし <html lang="ja"> <head><title>test</title> <style type="text/css"> div { padding:3px; } div#test1, div#test2 {margin:10px;width:300px;border:2px solid #ccc;} div.tab a {background-color:#ffa;} </style> </head> <body> <div id="test1"> <div class="tab"> <a href="#group1">test1</a><br> <a href="#group2">test2</a><br> <a href="#group3">test3</a> </div> <span>non-class Text</span> <div> <span class="group1">text1-1</span> <span class="group2">text2-1</span> <span class="group3">text3-1</span> </div> </div> <div id="test2"> <div> <span class="groupA">textA-1</span> <span class="groupB">textB-1</span> </div> <div> non-class text </div> <div> <div class="groupA"><a href="http://www.google.co.jp/">LinkA-3</a></div> <div class="groupB"><a href="http://www.yahoo.co.jp/index.html">LinkB-3</a></div> </div> <div> <div class="groupB">textB-2</div> <div class="groupA">textA-2</div> </div> <div class="tab"> <a href="#groupA">testA</a><br> <a href="#groupB">testB</a> </div> </div> <script type="text/javascript"> <!-- (function(ids) { var i,j,e,elm,id=[]; ids=ids.split(","); for (i=0;i<ids.length;i++){ if (elm=document.getElementById(ids[i])){ id[ids[i]]=true; e=elm.getElementsByTagName("*"); for(j=0;j<e.length;j++) if(e[j].className&&e[j].className.match(/(?:^| )(group.+?)(?: |$)/))break; if (e[j])change(elm,RegExp.$1); } } ids=null; if (id){ try{ document.addEventListener("click",function(e){func(e)},false); }catch(e){ document.attachEvent("onclick",function(e){func(e)}); } } function func(evt){ var t=evt.target||evt.srcElement; if (t.nodeName!="A"||!t.href.match(/(?:#)(group.+?)$/))return; var p=t.parentNode,g=RegExp.$1; while(p&&!id[p.id]) p=p.parentNode; if (!p)return; change(p,g); } function change(obj,group){ var i=0,e,elm=obj.getElementsByTagName("*"); while(e=elm[i++]) if(e.className&&e.className.match(/(?:^| )(group.+?)(?: |$)/))e.style.display=RegExp.$1==group?"":"none"; } })("test1,test2"); //--> </script> </body> </html>
- yyr446
- ベストアンサー率65% (870/1330)
----さらに続く----------- <div id="tabs7"> <ul> <li><a href="#tabs7-1">タブ7</a></li> <li><a href="#tabs7-2">タブ8</a></li> <li><a href="#tabs7-3">タブ9</a></li> </ul> <div id="tabs7-1"> <ul> <li><a href="#content-7-1">コンテンツ7-1</a></li> <li><a href="#content-7-2">コンテンツ7-2</a></li> <li><a href="#content-7-3">コンテンツ7-3</a></li> </ul> <div id='content-7-1'> <p>テキスト7-1</p> </div> <div id='content-7-2'> <p>テキスト7-2</p> </div> <div id='content-7-3'> <p>テキスト7-3</p> </div> </div> <div id="tabs7-2"> <ul> <li><a href="#content-8-1">コンテンツ8-1</a></li> <li><a href="#content-8-2">コンテンツ8-2</a></li> <li><a href="#content-8-3">コンテンツ8-3</a></li> </ul> <div id='content-8-1'> <p>テキスト8-1</p> </div> <div id='content-8-2'> <p>テキスト8-2</p> </div> <div id='content-8-3'> <p>テキスト8-3</p> </div> </div> <div id="tabs7-3"> <ul> <li><a href="#content-9-1">コンテンツ9-1</a></li> <li><a href="#content-9-2">コンテンツ9-2</a></li> <li><a href="#content-9-3">コンテンツ9-3</a></li> </ul> <div id='content-9-1'> <p>テキスト9-1</p> </div> <div id='content-9-2'> <p>テキスト9-2</p> </div> <div id='content-9-3'> <p>テキスト9-3</p> </div> </div> </div> </body> 終わり
- yyr446
- ベストアンサー率65% (870/1330)
----続き------ <div id="tabs4"> <ul> <li><a href="#tabs4-1">タブ4</a></li> <li><a href="#tabs4-2">タブ5</a></li> <li><a href="#tabs4-3">タブ6</a></li> </ul> <div id="tabs4-1"> <ul> <li><a href="#content-4-1">コンテンツ4-1</a></li> <li><a href="#content-4-2">コンテンツ4-2</a></li> <li><a href="#content-4-3">コンテンツ4-3</a></li> </ul> <div id='content-4-1'> <p>テキスト4-1</p> </div> <div id='content-4-2'> <p>テキスト4-2</p> </div> <div id='content-4-3'> <p>テキスト4-3</p> </div> </div> <div id="tabs4-2"> <ul> <li><a href="#content-5-1">コンテンツ5-1</a></li> <li><a href="#content-5-2">コンテンツ5-2</a></li> <li><a href="#content-5-3">コンテンツ5-3</a></li> </ul> <div id='content-5-1'> <p>テキスト5-1</p> </div> <div id='content-5-2'> <p>テキスト5-2</p> </div> <div id='content-5-3'> <p>テキスト5-3</p> </div> </div> <div id="tabs4-3"> <ul> <li><a href="#content-6-1">コンテンツ6-1</a></li> <li><a href="#content-6-2">コンテンツ6-2</a></li> <li><a href="#content-6-3">コンテンツ6-3</a></li> </ul> <div id='content-6-1'> <p>テキスト6-1</p> </div> <div id='content-6-2'> <p>テキスト6-2</p> </div> <div id='content-6-3'> <p>テキスト6-3</p> </div> </div> </div> ----足りんかった、続く----
- yyr446
- ベストアンサー率65% (870/1330)
どのライブラリー使ってもたぶん出来るんだと思いますが、 jQueryのUI Tabsを使って 回答２分割 ---その1---- <head> <link type="text/css" href="jquery.ui.all.css" media="screen" rel="stylesheet"> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript"> $(function(){ $('#tabs1').tabs(); $('#tabs1-1').tabs(); $('#tabs1-2').tabs(); $('#tabs1-3').tabs(); $('#tabs4').tabs(); $('#tabs4-1').tabs(); $('#tabs4-2').tabs(); $('#tabs4-3').tabs(); $('#tabs7').tabs(); $('#tabs7-1').tabs(); $('#tabs7-2').tabs(); $('#tabs7-3').tabs(); }); </script> </head> <body> <div id="tabs1"> <ul> <li><a href="#tabs1-1">タブ1</a></li> <li><a href="#tabs1-2">タブ2</a></li> <li><a href="#tabs1-3">タブ3</a></li> </ul> <div id="tabs1-1"> <ul> <li><a href="#content-1-1">コンテンツ1-1</a></li> <li><a href="#content-1-2">コンテンツ1-2</a></li> <li><a href="#content-1-3">コンテンツ1-3</a></li> </ul> <div id='content-1-1'> <p>テキスト1-1</p> </div> <div id='content-1-2'> <p>テキスト1-2</p> </div> <div id='content-1-3'> <p>テキスト1-3</p> </div> </div> <div id="tabs1-2"> <ul> <li><a href="#content-2-1">コンテンツ2-1</a></li> <li><a href="#content-2-2">コンテンツ2-2</a></li> <li><a href="#content-2-3">コンテンツ2-3</a></li> </ul> <div id='content-2-1'> <p>テキスト2-1</p> </div> <div id='content-2-2'> <p>テキスト2-2</p> </div> <div id='content-2-3'> <p>テキスト2-3</p> </div> </div> <div id="tabs1-3"> <ul> <li><a href="#content-3-1">コンテンツ3-1</a></li> <li><a href="#content-3-2">コンテンツ3-2</a></li> <li><a href="#content-3-3">コンテンツ3-3</a></li> </ul> <div id='content-3-1'> <p>テキスト3-1</p> </div> <div id='content-3-2'> <p>テキスト3-2</p> </div> <div id='content-3-3'> <p>テキスト3-3</p> </div> </div> </div> ------続く-----
- 0909union
- ベストアンサー率39% (325/818)
＞直接、scriptの改造の仕方か 私は改造するのはお勧めできません。逆に改造なんて発想自体が、あなたのような事を生んでしまうのでしょう。あなたのやりたいことは、２つの技術でできてしまうんですよ。つまり最小、２行でできてしまうのですよ。 後はクロスブラウザテクニックだけです。 人にコード提供してもらう前に、CSSを勉強してください。この程度なら、３日もあれば習得できるはずですが??? クロスブラウザもサンプルがすでに公開されているので、CSSを勉強していれば、１時間もあれば、動作や改造ができる程度の物です。 回答者はあなたの講師ではありません。動作しない部分だけを聞いてください。
補足
2行ですか。 凄いですね。 公開されているってことは ライブラリでしょうか？ 改造しなくてもよいものがあるのでしたら、ぜひお教えいただけないでしょうか？ よろしくお願いします。