ヤフー天気情報ページの[天気予報] [パーソナル天気]のタブやこちらのサイトの https://www.taikobo.co.jp/ 「欲しい商品を選ぶ」のタブの様にページが遷移しないでページ内でタブで内容が入れ替わるページを作りたいのですが、アクティブになるべきタブの画像が切り替わらないのと、最初に全ての内容部分が見えてしまってます。
http://kjs.qee.jp/
どなたかご伝授お願いいたします。 また、この作り方では問題があるようならばそれも合わせて教えていただけると幸いです。
よろしくお願いします。
No.5ベストアンサー
- 回答日時:
#2,3,4です。
> お作りいただきましたサンプルの<script>部分をコピーして使用してもよろしいのでしょうか?
構いませんが、コピーしたコードを使用して不具合があっても責任は持てません。
勿論、私の方でもテストしています。
が、あくまでサンプルですから、何かあっても対応できるぐらいには理解しておいた方が良いかと思います。
(本当はアドバイスを参考に自分で作るのが一番いいとは思うのですけどね…。)
> またその際、開いたときにデフォルトでtab1が開いているようにならなくなってしまいますが、どのように対処したらよろしいでしょうか。
#3でも触れましたが、目的の要素に className += ' on'; を付与します。
呼出元はonclickイベントにあるので、そこから紐づけて読むとわかるんじゃないでしょうか。
お礼が遅れてすいません。
細かく説明いただきまして感謝しております。 無事に起動することができました。
ありがとうございました。
No.4
- 回答日時:
この回答への補足
ご返答ありがとうございます。 お作りいただきましたサンプルの<script>部分をコピーして使用してもよろしいのでしょうか?
うまく機能することになりまして感謝しております。
またその際、開いたときにデフォルトでtab1が開いているようにならなくなってしまいますが、どのように対処したらよろしいでしょうか。
何度もお聞きして申し訳ありませんが、教えていただけませんでしょうか。よろしくお願いします。
No.3
- 回答日時:
#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
- 回答日時:
#1の回答に加えて、
> アクティブになるべきタブの画像が切り替わらないのと、
document.getElementById(tabname).className = 'on';// アクティブに
非アクティブなタブは className=NULL; にする。
この回答への補足
ありがとうございます。
教えていただいた通り「document.getElementById(tabname).className = 'on';」を<script type="text/javascript"></script>内に記載しました。
>非アクティブなタブは className=NULL; にする。 とはどの様にすればよろしいのでしょうか。 お手数ですがお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Word(ワード) Google ドキュメントで改ページを挿入する方法 1 2022/05/25 19:22
- Android(アンドロイド) Android端末(arrows we FCG01)のタブの切り替え方について 2 2023/01/02 10:59
- その他(ブラウザ) Microsoft Edge のタブ 2 2022/05/21 16:07
- PHP $_SESSIONに渡した後はそのまま使っても問題ありませんか? 3 2022/11/08 22:17
- Google+ Google Chrome お気に入り 使い方に混乱 GoogleのDiscoverを開きます 画像 1 2022/04/11 20:27
- Chrome(クローム) Chromeで複数タブを開いた状態で閉じ、再度開いた場合のタブの回復は? 2 2022/04/02 01:44
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- その他(ソフトウェア) 時間差でのオートクリック 1 2023/04/12 12:04
- Chrome(クローム) 最近のGoogle Chromeのデータ読み込みの遅延やエラーって頻発しますか? 2 2023/01/06 22:12
- Word(ワード) Word2013で、複数の表を同時に解除したい 1 2023/01/24 11:37
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
FindWindowの使い方
-
ハイパーリンクからメニュー無...
-
DBからPDFを取得して別画面で表...
-
ASP.Net 別ウィンドウを開く・...
-
QT 半透明の画面生成について
-
HTML 全画面表示 リンク先の...
-
WinAPIでタブ付きのウィンドウ...
-
新しいタブで開かせない方法は...
-
HTMLタグの属性
-
表示中のURLなどをバッチファイ...
-
インラインフレームの中の表示...
-
ドリームウィーバー、JavaScrip...
-
メモ帳やエディタで一度にスペ...
-
自分のサイトを開いた時にウィ...
-
target="_blank"とは何の意味で...
-
プルダウンメニューの開く方向...
-
googleマップをポップアップウ...
-
VC、コンソールアプリ結果の...
-
XMLを作成してもタグしか表示さ...
-
テキストエリア内の改行禁止
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
指定URLを新しいウィンドウで開...
-
自分のサイトを開いた時にウィ...
-
プルダウンメニューの開く方向...
-
新しいタブで開かせない方法は...
-
ASP.Net 別ウィンドウを開く・...
-
DBからPDFを取得して別画面で表...
-
表示中のURLなどをバッチファイ...
-
HTML 全画面表示 リンク先の...
-
ポップアップメニューを同じ画...
-
プルダウンメニューからリンク→...
-
HTML,js)リンクを新しいタブで...
-
FindWindowの使い方
-
HP、リンク先を最大化で開く方...
-
ハイパーリンクからメニュー無...
-
googleマップをポップアップウ...
-
QT 半透明の画面生成について
-
別ウィンドウで複数ページを同...
-
OpenCVのcvNamedWindowによるウ...
-
インラインフレームの中の表示...
-
新規ウィンドウの表示位置を画...
おすすめ情報