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


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

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

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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/05/02 20:49:41
  • 終了:2006/05/08 10:24:09

回答(2件)

id:worstman No.1

最低人間回答回数121ベストアンサー獲得回数62006/05/02 22:31:26

ポイント35pt

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

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

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

id:oppara No.2

oppara回答回数2ベストアンサー獲得回数02006/05/02 22:58:23

ポイント100pt

こんにちは、

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

(違いはコンテンツの表示非表示に、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/

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません