プロが教える店舗＆オフィスのセキュリティ対策術

リンクをクリックすると複数コンテンツが切り替わる×9 javascri

締切済

  • 質問者：gootara_illust
  • 質問日時：
  • 回答数：7件

リンクをクリックすると複数コンテンツが切り替わる×9 javascript

参考サンプル
http://gootara-illustration.hp.infoseek.co.jp/ta …
このようなスイッチ切り替えのモノを9組同じページで可能なjavascriptを探しています。
初心者の私にも分かるように説明していただけないでしょうか？

前回スレ
http://oshiete.goo.ne.jp/qa/6023200.html

ここで
http://www.kminek.pl/lab/yetii/
と言うサイトを紹介してもらったのですが
海外サイトで翻訳通しても
カスタマイズの仕方がいまいち分かりませんでした。
（バカです。）

直接、scriptの改造の仕方か
もう少し分かりやすいサイトを教えてください。
どうぞよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.7

  • 回答者： my--
  • 回答日時：

>>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 …
スクリプトの出所はここですか。
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： my--
  • 回答日時：

http://gootara-illustration.hp.infoseek.co.jp/ta …
グループ化して処理できるように改変しています。

//----- スクリプトはここから -----
// 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>
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： fujillin
  • 回答日時：

数はいくつでも可


レイアウトはしてないので適宜やってください
文字数制限のため説明はなし

<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 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>
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： yyr446
  • 回答日時：

----さらに続く-----------


<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>

終わり
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yyr446
  • 回答日時：

----続き------


<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>

----足りんかった、続く----
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yyr446
  • 回答日時：

どのライブラリー使ってもたぶん出来るんだと思いますが、


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>

------続く-----
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： 0909union
  • 回答日時：

＞直接、scriptの改造の仕方か



私は改造するのはお勧めできません。逆に改造なんて発想自体が、あなたのような事を生んでしまうのでしょう。あなたのやりたいことは、２つの技術でできてしまうんですよ。つまり最小、２行でできてしまうのですよ。

後はクロスブラウザテクニックだけです。

人にコード提供してもらう前に、CSSを勉強してください。この程度なら、３日もあれば習得できるはずですが???

クロスブラウザもサンプルがすでに公開されているので、CSSを勉強していれば、１時間もあれば、動作や改造ができる程度の物です。

回答者はあなたの講師ではありません。動作しない部分だけを聞いてください。

この回答への補足

2行ですか。
凄いですね。

公開されているってことは
ライブラリでしょうか？

改造しなくてもよいものがあるのでしたら、ぜひお教えいただけないでしょうか？

よろしくお願いします。

補足日時：2010/07/12 17:48
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報