1

私の「about」ページでは、ミッションや連絡先などを同じコンテナに入れることができるdivコンテンツ切り替えメソッド（Bill Posterによる）を使用しています。別のページから特定のタブにリンクしようとするまで、それは本当にうまく機能します。たとえば、「/ about /＃mission」または「/ about /＃contact」があり、正しいオプションではなく、コンテンツスイッチボックスの最初の「about」オプションにリンクすることになります。ユーザーがホームページから[お問い合わせ]をクリックして、[連絡先]タブに直接移動できるようにしたいと思います。

私はhtmlとjqueryを微調整しようとしました（ダブルアンカーで実験したとしても、それは問題ではないと確信しています）、Cookie認識を追加しました（ユーザーがアクセスしていない場合は完全に機能しません）ページはまだ...）、そして私はフォーラムを広範囲に検索しました。私が間違っていること、またはこれを行うためのより良い方法があるかどうかについてのアイデアはありますか？私は問題を必要以上に複雑にしていると思いますが、私はコーディングにかなり慣れておらず、とりわけ、正しい検索言語を使用していない可能性があります。

助けていただければ幸いです!! 私はこの特定のコンテンツ切り替え方法と結婚しておらず、他のことを試してみてうれしいです。どうもありがとう！

サラ

function switchContent(obj) {

    obj = (!obj) ? 'sub1' : obj;

    var contentDivs =    document.getElementById('container').getElementsByTagName('div');
    for (i=0; i<contentDivs.length; i++) {
        if (contentDivs[i].id && contentDivs[i].id.indexOf('sub') != -1) {
            contentDivs[i].className = 'hide';
        }
    }
    document.getElementById(obj).className = '';

}


<div id="container">

<div id="sub1">content 1</div>
<div id="sub2" class="hide">content 2</div>
<div id="sub3" class="hide">content 3</div>

<div id="navigation">
    <a href="#" class="mininav" onclick="switchContent('sub1');   return false;">link 1</a>
    <a href="#" class="mininav" onclick="switchContent('sub2'); return false;">link 2</a>
    <a href="#" class="mininav" onclick="switchContent('sub3'); return false;">link 3</a>
</div>

4

1 に答える 1

0

ロケーション文字列のフラグメント識別子の値を確認するだけです。いくつかの条件付きパラメーターに基づいて、変更するオブジェクトを渡します。

if(window.location.hash){
    //fragment identifier such as '#mission', or '#about' has been found
    var sub = '',
        hsh = window.location.hash.split('#')[1]; // get string without # sign

    switch(hsh){
        case 'mission' :
            sub = 'sub1';
            break;
        case 'contact' :
            sub = 'sub2';
            break;
    }
    switchContent(sub);
}

上記では、フラグメント識別子を確認します。見つかった場合は、switch ステートメントを作成して文字列を準備します。切り替えが完了したら、文字列を関数に渡します。これにより、コンテンツ ローダーが起動されます。

このコードが内部で実行されることを確認してください$(document).ready(function(){ }):。そうしないと、DOM 要素が利用できない場合があります。

注: これを変更して、より関係に適した設計パターンを構築することをお勧めします。fragment identifierとelement containing the markupがデータ属性などの共通の文字列を共有している場合。<div data-rel="contact" id="sub1">. これが完了すると、手動で変数に割り当てる必要がある switch ステートメントを作成する必要がなくなります。より動的で流動的な方法を受け入れる場合は、喜んで例を作成します。以下に回答してください。

より流動的な方法を次に示します。

物事をより健全に保つことができるように、関係を構築する必要があります。コンテンツ div を変更する方法を見てみましょう。

<div class="info" id="mission">content 1</div>
<div class="info" id="about">content 2</div>
<div class="info" id="contact">content 3</div>

ids内部のコンテンツだけでなく、操作しようとしているフラグメント識別子と特別な関係を持つように、を変更したことがわかります。hashこのようにして、存在をチェックする条件ステートメントでその情報を参照することができます。infoまた、コードをよりクリーンにするための新しいクラスを追加しました。

それでは、そのコンテンツ スイッチャー機能をクリーンアップしましょう。以前は、三項演算子を使用して obj が存在するかどうかを確認し、存在しない場合はそれに任意の文字列を割り当てていました。そうしないようにしましょう。

function switchContent(did){
    $('.info').hide(0); //hide all the elements.
    $('div[id='+did+']').show();  //show only what we want!
}

コンテンツ スイッチャーは以上です。では、ハッシュ タグが存在するための条件文を作成しましょう。

$(function(){
    if(window.location.hash){
        switchContent(window.location.hash.split('#')[1]);
    }  
});

コードを短くし、より流動的にしました。ready上記では、要素が存在することがわかり、ページが意図したとおりに機能するように、条件チェックを関数内にラップしました。

次に、JavaScript が有効になっていない場合でもアンカーが機能するように、アンカーをクリーンアップしましょう。

<a href="#mission" class="mininav">link 1</a>
<a href="#about" class="mininav">link 2</a>
<a href="#contact" class="mininav">link 3</a>

偉大な。これで、はるかにきれいになりました。面倒なインライン クリック関数やランダムな文字列識別子はありません。機能させましょう。

$('#navigation a').click(function(e){
    e.preventDefault(); //we don't want the default jumping behavior
    switchContent($(this).prop('href').split('#')[1]);
});

簡単できれい！クリック イベントをキャプチャし、デフォルトの動作を停止してhref without the # signから、 を関数に渡してコンテンツを切り替えます。それでおしまい！

于 2013-01-12T19:18:46.930 に答える