javaスクリプトを使ったタブ切り替えに関して質問です。

締切済

質問者：mirainokai
質問日時：2010/03/03 13:00
回答数：3件

javaスクリプトを使ったタブ切り替えに関して質問です。

http://blog.livedoor.jp/soken2ch/contents/itmobi …

このページの下部にもう一つタブエリアを作りたいのですが、一つのページにタブエリアを複数作るのにはどう記述すればいいのでしょうか？

よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： fujillin
回答日時：2010/03/05 22:02

こんばんは。

ご提示のサイトをこちらのIE6で見ると、添付画像の状態になって、タブが表示されないみたい…
ソースの構造をつかむのが面倒だったので、No1様が簡略化してくださったのを見て、それを利用させていただいています。

・CSSを使うのなら、レイアウトや装飾はできるだけCSSにもっていったほうが
　HTMLが見やすくなる。
・tabの設定時にtab.init()を行なっているのだから、設定にgetElementを
　列挙させなくても良いだろう
・・・なんて思っていろいろいじっていたら、別物になってしまいました。

CSSを解析するのも面倒だったので、見た目で真似しています。なので多少違うかも。
とりあえず、CSSは全部兼用にしてありますが、それぞれで体裁を変える場合はセレクタをid指定にすれば、個々のタブ群ごとの設定も可能です。

タブと表示内容の全体をdiv要素でくくって、それにidをつけておいて、
一番最後のほうの
　var tab1 = new Tab('tab1');
　var tab2 = new Tab('tab2');
がタブを設定しているところ。（何個あっても可）

原型に近いものはNo2様がすでにご提示なさっていますので、まあいいかと、ご参考までに。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
.tab_wrapper {
background-color:#fff;
}
ul.tab {
list-style-type: none;
height:1em;
margin:0; padding:0;
border-bottom: 2px solid #333;
overflow:hidden;
}
ul.tab li {
float:left;
}
ul.tab li a {
display: block;
border: 1px solid #ccc;
border-bottom: 0;
padding: 0 20px;
color: #777;
text-align: center;
font-size: 12px;
color: #0000cd;
}
div.tab_panel {
position:relative;
width:100%;
height:200px;
clear:both;
}
div.tab_panel iframe {
width:100%;
height:200px;
border:0;
position:absolute;
overflow:auto;
}
ul.tab li a:hover, ul.tab li.active a {
border-color: #333;
color: #fff;
background: #111;
}
</style>
</head>

<body>
<p>タブその1
<div id="tab1" class="tab_wrapper">
<ul class="tab">
<li><a href="#p1">title1</a></li>
<li><a href="#p2">title2</a></li>
<li><a href="#p3">title3</a></li>
</ul>

<div class="tab_panel">
<iframe id="p1" src="Test/A.html" frameborder="0"></iframe>
<iframe id="p2" src="Test/B.html" frameborder="0"></iframe>
<iframe id="p3" src="Test/C.html" frameborder="0"></iframe>
</div>
</div>

<hr>
<p>タブその2
<div id="tab2" class="tab_wrapper">
<ul class="tab">
<li><a href="#p4">title4</a></li>
<li><a href="#p5">title5</a></li>
<li><a href="#p6">title6</a></li>
</ul>

<div class="tab_panel">
<iframe id="p4" src="Test/D.html" frameborder="0"></iframe>
<iframe id="p5" src="Test/E.html" frameborder="0"></iframe>
<iframe id="p6" src="Test/F.html" frameborder="0"></iframe>
</div>
</div>

<script type="text/javascript">
// <![CDATA[
var Tab = function(tab_id) {
this.id = tab_id, this.tab = [], this.panel = [];
this.init();
}

Tab.prototype = {
dive : function() {
if (this.getPanel(window.location.hash.split('#')[1])) return;
if (this.tab[0]) this.getPanel(this.tab[0].id);
},

getPanel : function(id) {
var flg;
if (flg = this.id2obj(id, 'panel')) this.showPanel(id);
return flg;
},

showPanel : function(id) {
var i = 0, e, p = this.panel, t = this.tab;
while (e = p[i++]) {
e.style.display = (id == e.id)?'block':'none';
this.id2obj(e.id, 'tab').className = (id == e.id)?'active':'';
}
},

clickfunc : function(obj) {
return function(evt) {
var t = evt.target || evt.srcElement;
if ('A' == t.nodeName) obj.getPanel(t.href.split('#')[1]);
}
},

id2obj : function(id, f) {
var i, e, t;
if ('panel' == f) {
t = this.panel;
for (i=0; i<t.length; i++) if (id === t[i].id) { e = t[i]; break; }
} else if ('tab' == f) {
t = this.tab;
for (i=0; i<t.length; i++) if (id === t[i].id) { e = t[i].elm; break; }
}
return e;
},

init : function() {
var i, c, e, t = document.getElementById(this.id);
e = check('DIV', 'tab_panel', 'IFRAME'), this.panel = e.child;
e = check('UL', 'tab', 'LI');
for (i=0; i<e.child.length; i++) {
this.tab[i] = { elm : e.child[i], id : '' };
c = e.child[i].firstChild;
while (c && c.nodeName != 'A') c = c.nextSibling;
this.tab[i].id = c?c.href.split('#')[1]:null;
}
if (this.tab && this.panel) {
try{
e.parent.addEventListener("click",this.clickfunc(this),false);
}catch(evt){
e.parent.attachEvent("onclick",this.clickfunc(this));
}
this.dive();
}
function check(t1, cls, t2) {
var i, p = null, r = [], e = t.getElementsByTagName(t1);
for (i=0; i<e.length; i++) if (cls == e[i].className) { p = e[i]; break; }
if (p) r = p.getElementsByTagName(t2);
return { parent:p, child:r };
}
}
}

var tab1 = new Tab('tab1');
var tab2 = new Tab('tab2');

// ]]>
</script>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： yyr446
回答日時：2010/03/05 12:52

No1.です。

「page8以降は赤い部分に出力したい」
そおいう要望だったのですか、てっきり同じIFRAME位置に出したいのかと
思っていました。
別のタブメニューのセットを用意すればいいわけで、なるべく原型のSCRIPT
をこわさないように、tabオブジェクトをクラス化して、間単に使いまわせる
ように多少書き換えてみました。CSSの部分はとりあえず前の回答のまま（手抜き）、
head部分にあるSCRIPTを次のように書き換えました。
<script type="text/javascript" charset="utf-8">
// <![CDATA[
function tab(){
this.init=function(){
var tabs = this.setup.tabs;
var pages = this.setup.pages;
for(i=0; i<pages.length; i++) {
if(i !== 0) pages[i].style.display = 'none';
tabs[i].onclick = function(){showpage(this,tabs,pages); return false; };
}
dive(tabs,pages);
}
dive = function(tabs,pages){
var hash = window.location.hash;
hash = hash.split("?");
hash = hash[0].split("#");
for(i=0; i<pages.length; i++) {
if(pages[i] == document.getElementById(hash[1])) showpage(tabs[i],tabs,pages);
}
}
showpage =function(obj,tabs,pages){
var num;
for(num=0; num<tabs.length; num++) {
if(tabs[num] === obj) break;
}
for(var i=0; i<pages.length; i++) {
if(i == num) {
pages[num].style.display = 'block';
tabs[num].className = 'present';
}
else{
pages[i].style.display = 'none';
tabs[i].className = null;
}
}
}
}
// ]]>
</script>
htmlの部分はほぼ同じで、こうなります。（長あー）
<div id="content" class="hfeed">
<ul id="tab">
<li class="present"><a href="#page1">主要トピックス</a></li>
<li class=""><a href="#page2">Web2.0</a></li>
<li class=""><a href="#page3">SEO・SEM</a></li>
<li class=""><a href="#page4">アフィリエイト</a></li>
<li class=""><a href="#page5">モバイル</a></li>
<li class=""><a href="#page6">アルファブログ・コラム</a></li>
</ul>
<div id="page1" class="" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px;" align="left">
<IFRAME src="http://blog.livedoor.jp/soken2ch/rss_frame/it/it … bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page2" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="http://blog.livedoor.jp/soken2ch/rss_frame/it/it … bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page3" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="http://blog.livedoor.jp/soken2ch/rss_frame/it/it … bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page4" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="http://blog.livedoor.jp/soken2ch/rss_frame/it/it … bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page5" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="http://blog.livedoor.jp/soken2ch/rss_frame/it/it … bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page6" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="http://blog.livedoor.jp/soken2ch/rss_frame/it/it … bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<ul id="tab2">
<li class="present"><a href="#page7">追加ページ1</a></li>
<li class=""><a href="#page8">追加ページ2</a></li>
<li class=""><a href="#page9">追加ページ3</a></li>
<li class=""><a href="#page10">追加ページ4</a></li>
<li class=""><a href="#page11">追加ページ5</a></li>
<li class=""><a href="#page12">追加ページ6</a></li>
</ul>
<div id="page7" class="" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px;" align="left">
<IFRAME src="追加ページ1のURL" bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page8" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="追加ページ2のURL" bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page9" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="追加ページ3のURL" bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page10" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="追加ページ4のURL" bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page11" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="追加ページ5のURL" bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page12" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="追加ページ6のURL" bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
</div>
今回は、この後に続くSCRIPTをこうします。
<script type="text/javascript">
// <![CDATA[
tab.prototype.setup = null;

tab1=new tab();
tab1.setup = {
tabs:document.getElementById('tab').getElementsByTagName('li'),
pages:[
document.getElementById('page1'),
document.getElementById('page2'),
document.getElementById('page3'),
document.getElementById('page4'),
document.getElementById('page5'),
document.getElementById('page6')
]
};
tab1.init();

tab2 = new tab();
tab2.setup = {
tabs:document.getElementById('tab2').getElementsByTagName('li'),
pages: [
document.getElementById('page7'),
document.getElementById('page8'),
document.getElementById('page9'),
document.getElementById('page10'),
document.getElementById('page11'),
document.getElementById('page12')
]
}
tab2.init();
// ]]>
</script>

このやり方で、いろんな場所にタブメニューセットが配置できるかと、
後は、CSSの定義が冗長になるので、一工夫倉した方がよいですね。
タブメニューのSCRIPTとCSSは関係ないようです。

- 0
- 件

通報する

No.1

回答者： yyr446
回答日時：2010/03/04 13:36

詳しく調べて改造するのが面倒なので、場当たり的にとってつけたつけた

ような対処でよろしければ、下のように出来ます。
（CSSやJAVASCRIPTのオブジェクト拡張の方法が今一わからんもんで．．．）
まずCSSの追加
<style type="text/css">
#tab2 {
margin-left: 0;
padding-left: 0;
margin-bottom: 0;
border-bottom: 2px solid #333;
height: ;
width: 100%;
overflow: hidden;
}
#tab2 li {
float: left;
width: px;
height: ;
font-size: 12px;
}
#tab2 li a {
display: block;
width: px;
height: ;
border: 1px solid #ccc;
border-bottom: 0;
padding: 0 20px;
color: #777;
text-align: center;
font-size: 12px;
color: #0000cd;
}
#tab2 li a:hover,
#tab2 li.present a {
border-color: #333;
color: #fff;
background: #111;
}
#tab2 li a:hover,
#tab2 li.present2 a {
border-color: #333;
color: #fff;
background: ffff00;
}
#page7, #page8, #page9, #page10, #page11, #page12 {
margin-bottom: ;
padding-top: 0;
border-left: 2px solid #333;
}
</style>
次にHTML部分は
<div id="content" class="hfeed">
<ul id="tab">
<li class="present"><a href="#page1">主要トピックス</a></li>
<li class=""><a href="#page2">Web2.0</a></li>
<li class=""><a href="#page3">SEO・SEM</a></li>
<li class=""><a href="#page4">アフィリエイト</a></li>
<li class=""><a href="#page5">モバイル</a></li>
<li class=""><a href="#page6">アルファブログ・コラム</a></li>
</ul>
<div id="page1" class="" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px;" align="left">
<IFRAME src="http://blog.livedoor.jp/soken2ch/rss_frame/it/it … bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page2" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="http://blog.livedoor.jp/soken2ch/rss_frame/it/it … bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page3" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="http://blog.livedoor.jp/soken2ch/rss_frame/it/it … bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page4" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="http://blog.livedoor.jp/soken2ch/rss_frame/it/it … bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page5" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="http://blog.livedoor.jp/soken2ch/rss_frame/it/it … bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page6" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="http://blog.livedoor.jp/soken2ch/rss_frame/it/it … bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page7" class="" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px;" align="left">
<IFRAME src="追加ページ1のURL" bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page8" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="追加ページ2のURL" bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page9" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="追加ページ3のURL" bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page10" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="追加ページ4のURL" bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page11" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="追加ページ5のURL" bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<div id="page12" style="border-style:dashed; border-width: 0px 0px 0px 0px;border-color: #000000; padding:0px 0px 15px 0px; display: none;" align="left">
<IFRAME src="追加ページ6のURL" bgcolor="#fff" width="100%" height="200px" frameborder="0" scrolling="yes" style="border-color:#0000ff;border-style solid; border-width:0px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;"></IFRAME>
</div>
<ul id="tab2">
<li class="present"><a href="#page7">追加ページ1</a></li>
<li class=""><a href="#page8">追加ページ2</a></li>
<li class=""><a href="#page9">追加ページ3</a></li>
<li class=""><a href="#page10">追加ページ4</a></li>
<li class=""><a href="#page11">追加ページ5</a></li>
<li class=""><a href="#page12">追加ページ6</a></li>
</ul>
</div>
という様に追記して、この後の<script>は、
<script type="text/javascript">
// <![CDATA[
var elms=[];
var tab1=document.getElementById('tab').getElementsByTagName('li');
var tab2=document.getElementById('tab2').getElementsByTagName('li');
for(i=0;i<tab1.length;i++){
elms.push(tab1[i]);
}
for(i=0;i<tab2.length;i++){
elms.push(tab2[i]);
}
tab.setup = {
tabs:elms,
pages: [
document.getElementById('page1'),
document.getElementById('page2'),
document.getElementById('page3'),
document.getElementById('page4'),
document.getElementById('page5'),
document.getElementById('page6'),
document.getElementById('page7'),
document.getElementById('page8'),
document.getElementById('page9'),
document.getElementById('page10'),
document.getElementById('page11'),
document.getElementById('page12')
]
}
tab.init();
// ]]>
</script>
こう書き換えます。

この回答への補足

上記本当にありがとうございます。

ただ実装してみると、既存のインラインフレームエリアにすべてのリンクが集約してしまいます。

◆キャプチャ
http://blog.livedoor.jp/soken2ch/sample/sample.jpg

こんな風になってしまいます。キャプチャのとおり、page8以降は赤い部分に出力したいのですが、どうすればいいでしょうか。

何度も申し訳ございません。

補足日時：2010/03/05 01:23

通報する