人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Yahoo!のトップページ検索窓のように画面遷移無しに検索タブを切り替える方法を教えてください。(はてなのトップページも同じような仕組みですね)

javascriptとCSSを使用して実現しているのは分かるのですが・・・

またこちら(http://nais.to/~yto/tools/css_tabs/)の「CSS と JavaScript でタブ切り替え」は一度参考にして試しましたが、onloadの仕組みを使用しているので一瞬画面が崩れてしまうようです。

ということで、画面の読み込み時にレイアウト崩れの恐れがない方法が一番知りたいです。

●質問者: taicious
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS JavaScript Yahoo! はてな トップページ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● 最低人間
●35ポイント

http://www.yahoo.co.jp/

のソースを表示させればそのままコードが載っていますよ。

表示される広告によって前後するとは思いますが、大体465行目あたりから始まるJavaScriptによって実現されています。


2 ● oppara
●100ポイント

こんにちは、

どちらも基本的には同じような事をしてると思います。

(違いはコンテンツの表示非表示に、innerHTMLを使用しているか、style.positionとstyle.visibilityを使用しているか)

タブの切り替えは、クリックされた時に、直にクラスを指定しています。

yahooの場合

function t(o,tm){

ta=o.id.substring(1);

lt.className='o';

o.className='h';

’h’は選択状態のcssのクラス。'o'は非選択状態のクラス。

で、'lt'の初期値は'v1'("ウェブ"タブのid)。

たつをさんの場合

document.getElementById(hpref + i).className = "open";

or

document.getElementById(hpref + i).className = "close";

yahooは、はじめからid='v1'が選択状態になっているので、

onloadの必要がありません。

たつをさんの方も、. tabbody用のcssを用意して、id="head1"とid="box1"にクラスを指定すれば、onloadを使う必要もないと思います。

コンセプトに反しますけど>なるべく CSS や JS の記述量を最小に

http://example.com/

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ