HTML CSSのタブメニュー

Question

私はクラスのためにGoogleエンジンで作業していますが、CSSタブ付きメニューについて質問がありました。私はそれが重要な場合にはその1へのリンクである、ここで、タブ付きメニューのチュートリアルを見つけました：

http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html

誰もがそれを作るための方法を知っていたならば、それはリロードする必要はありませんでしたように、私が思っていましたメニューのリンクをクリックするたびに基本的には、既にメモリ内の情報を持って、テキストだけを変更したり、ページの特定の部分を更新したりしてください。どのような種類のものが必要か分かりませんが、基本的にはそのコードを正確にコピーし、アプリエンジンとテンプレートの継承を使用して別のページ情報を取得しました。他の情報が必要な場合は教えてください。前もって感謝します。

WWaldo

Answer 1

最近、この種のアプローチを使用してgawkerに切り替えました。 Here's Tim Brayの投稿とそれが悪い考えである理由についての投稿。

Answer 2

私はJavaScriptを使用して、少なくとも二つの可能性を示唆することができます。プリロードコンテンツを置き換える/（例えば）メインiframe要素の内容（例えば、src属性の値）を変化させること、または暴露の

1. /：あなたはに向けて、あなたのCSSのメニューアイテムのリンクをターゲット可能性のいずれかdiv個の要素のうちの1つ;
2. サーバーへのAJAX呼び出しをトリガーして更新を決定し、必要なコンポーネント（例えば、div）の内容を動的に更新します。

違いは、コマンド（2）で動的にアクセスするのではなく、すべてのページコンテンツを最初にプリロードすることです（1）。提案（2）でAJAXを実装するサーバーを制御できない場合は、（1）で十分ですが、作業（およびダウンロード）をクライアントにオフロードするだけで済みます。

どちらのアプローチでも、JavaScriptを使用してページコンテンツを動的に更新する必要があります。 'ネットはこれの例で散らばっている。例えば、this oneをチェックしてください。

Answer 3

実際には、HTMLでタブ付きメニューを作成するのはかなり簡単ですが、CSSを使用すると、デザインにJavaScriptが必要なくなります。私は約1時間半でこの例をしました。

私の例のスクリーンショットです。 （私はURLから私の名前を検閲、そして、私はそれらをトリミング）

あなたが行うすべては、それらの他のウェブページへのリンクでは、3箱を作るです。すべてのページで同じように見えます。角を丸くすることをお勧めします。

<div id="Tab1"><a href="Template1.html">Tab Numbah One </a></div><div id="Tab2"><a href="Template2.html">Tab Numbah Two </a></div><div id="Tab3"><a href="Template3.html">Tab Numbah Three </a></div>

外部CSSシートに移動し、それらを左にすべてのフロート行い、同じ行に、それはかなり見えるように、あなたはいくつかの並べ替えの境界を必要としています。

各ページでオーバーライドスタイルを作成します。下のボーダーを存在させないようにして、バインダーのタブのように見えるようにします。私は色を変えたので、あなたがそのページにいたとき、それは少し良く見えました。注意してください、私は非常に異常に私のCSSをインデントします。

ページ1

#Tab1 { border-bottom:none; background-color:white; } 2ページ

#Tab2 { border-bottom:none; background-color:white; } ページマルクは彼のソリューションは、純粋なCSS3であるが、それは厳密には正しくないと言う3

#Tab1 { border-bottom:none; background-color:white; }