ページ内にタブを設置

質問

ヤフー天気情報ページの[天気予報]　[パーソナル天気]のタブやこちらのサイトの　https://www.taikobo.co.jp/　「欲しい商品を選ぶ」のタブの様にページが遷移しないでページ内でタブで内容が入れ替わるページを作りたいのですが、アクティブになるべきタブの画像が切り替わらないのと、最初に全ての内容部分が見えてしまってます。

http://kjs.qee.jp/

どなたかご伝授お願いいたします。　また、この作り方では問題があるようならばそれも合わせて教えていただけると幸いです。
よろしくお願いします。

回答No.5

think49 · ベストアンサー

#2,3,4です。

> お作りいただきましたサンプルの<script>部分をコピーして使用してもよろしいのでしょうか？
構いませんが、コピーしたコードを使用して不具合があっても責任は持てません。
勿論、私の方でもテストしています。
が、あくまでサンプルですから、何かあっても対応できるぐらいには理解しておいた方が良いかと思います。
(本当はアドバイスを参考に自分で作るのが一番いいとは思うのですけどね…。)

> またその際、開いたときにデフォルトでtab1が開いているようにならなくなってしまいますが、どのように対処したらよろしいでしょうか。
#3でも触れましたが、目的の要素に className += ' on'; を付与します。
呼出元はonclickイベントにあるので、そこから紐づけて読むとわかるんじゃないでしょうか。

お礼

お礼が遅れてすいません。
細かく説明いただきまして感謝しております。　無事に起動することができました。
ありがとうございました。

回答No.4

think49

#2,3です。

下記URLにサンプルをUPしました。
http://vird2002.s8.xrea.com/test/test_js/tab.html

補足

ご返答ありがとうございます。　お作りいただきましたサンプルの<script>部分をコピーして使用してもよろしいのでしょうか？
うまく機能することになりまして感謝しております。
またその際、開いたときにデフォルトでtab1が開いているようにならなくなってしまいますが、どのように対処したらよろしいでしょうか。
何度もお聞きして申し訳ありませんが、教えていただけませんでしょうか。よろしくお願いします。

回答No.3

think49

#2です。

> document.getElementById(tabname).className = 'on'; // アクティブに
すみません、これは意図通りに動きませんね。

1. 開いたタブを class="on" にする
tab1を開くなら、class="tab1" の parentNode.className += ' on'
getElementsByClassName でぐぐると、classNameで要素リストを取得する方法が見つかるのでそれを参考にしてみて下さい。

2. 非アクティブなタブを class="" にする
document.getElementById(tabname).className='';

で id="gaiyo" 等、3つのIDを指定してclassNameを消去してください。

こんな感じで出来ると思います。

回答No.2

think49

#1の回答に加えて、

> アクティブになるべきタブの画像が切り替わらないのと、
document.getElementById(tabname).className = 'on'; // アクティブに

非アクティブなタブは className=NULL; にする。

補足

ありがとうございます。　
教えていただいた通り「document.getElementById(tabname).className = 'on';」を<script type="text/javascript"></script>内に記載しました。
>非アクティブなタブは className=NULL; にする。　とはどの様にすればよろしいのでしょうか。　お手数ですがお願いします。

回答No.1

yambejp

scriptタグの中でこういう記載をしておく

window.onload=function(){ChangeTab('tab1');}

もしくは、tab2,tab3のタグにあらかじめスタイルシートで
display:noneを指定しておく。

のどちらかで実現できます。

お礼

ありがとうございます。　正確に表示できました。