jQueryを使用して現在のページ/タブのdivクラスにエフェクトを適用する

ナビゲーションバーにこのページの3つの葉があります。各葉のセクションは絶対配置と異なるZ-インデックスを持つdivクラスからなるnavリンクですので、茶色の上に緑色の葉をフェードインできます。

また、 CSSトリックは、ページを変更するためにハッシュチェンジを使用します。

このjsfiddle のナビゲーションバーに、葉の退色に関連するすべてのコードが表示されます>(スクリプトには、ページ間の遷移のコードも含まれています)。

私が苦労している部分は、現在のページのdivクラス ".current"(退色している​​緑色の葉が含まれています)を参照する方法です。 Webページが最初に開かれたとき、ホームページまたは約ページのいずれかで、現在のページの緑の葉がページがロードされるときに不透明度:1に設定されるように、これを行う必要があります(これは、ユーザーがページをクリックして読み込みますが、ページが最初に読み込まれたときには表示されません)。

各ページのCSSで.currentクラスの不透明度を設定できますが、hashchangeメソッドを使用すると、#メインコンテンツのHTMLだけが変更されるため、これは機能しません。私は私のjavascriptでこれを設定する方法を見つけ出す必要があると推測し、何とか現在のページ/タブを参照します。

これに関連して、.close div/linkのクリックハンドラで現在のページの緑色の葉の不透明度を変更する方法があります。つまり、ホームページがアクティブなときに連絡先フォームが閉じられている場合、 (これは現在のページである)、およびaboutページと同じです。ここでも、クリックハンドラの現在のページ/タブを参照する方法を見つける必要があるようです。

誰かが私にこれを手伝ってもらえますか?

ありがとう、

ニック

3

2 答え

うわー、それは混乱している、 あなたの状況を複雑にするように思えます。 ページ固有のCSSなどは必要ありません。別の時に.currentクラスを設定するだけで済みます。

誰かがあなたのウェブサイトに移動するときに、#タグが読み込まれているか、何もないことがわかります。

さて、基本的にはページの読み込みにハッシュタグを見る必要があります。そこに1つがあり、それが正しければ(その実際のページをあなたが占めているということです)、あなたは今のようにそのページをロードします。また、葉を強調表示します。

.currentリーフであなたの事柄を実際に単純化することができます

あなたが情報をロードすると、実際には「リーフ」は「最新」です。したがって、$ wrapperの中に情報がロードされて配置されると、フェードインしてアニメーション化されます。 .currentを次に置いてください。

解説または実際の例が必要な場合のコメント:)


アップデート - クイックソリューション

http://jsfiddle.net/6p2f6/1/
Basically i moved the stuff changing the .current leaves into the hash change and at the bottom I made it check to see if the user navigated to a page using hash, if not then it set a default. Its not perfect but its the best i can do in the time i have at the moment. Hope it helps!

Again comment if you need clarification or more example


更新 - 新しいコード:)

http://www.mediafire.com/?51vajskfeu923

いくつかのファイルがありますので、私はJSfiddleでそれをチャックできませんでした

そう、私は、フェーディングメニュー全体を動作させることができませんでしたが、私はそれを表示/通常のホバーのように隠れて得た。私は後でそれを見ることができますが、あなたがそれを行う方法を知っているので、私はあなたがそれを理解できると仮定しています。 javascriptファイルに行き、これを探してください:

    $this = $(this);
        var currentHash = window.location.hash;
        console.log('specialMenu this.each(this) = '+$this.attr('href'));
        //append all images
        $this.append('')
        .append('')
        .append('');

        //prepare positioning
        $('.defaultImage').css({
            'z-index':'1'
        });
        $('.activeImage').css({
            'z-index':'2'
        });
        $('.hoverImage').css({
            'z-index':'3'
        });
        //Make parent correct height
        $this.height($this.find('img').height());

        //check what hash value is loaded
        if(currentHash == $this.attr('href')){
            $this.find('img:not(.activeImage)').hide();
            $this.find('img.activeImage').show();
        }else{
            $this.find('img:not(.defaultImage)').hide();
            $this.find('img.defaultImage').show();
        }
        $(this).hover(function(){
            currentHash = window.location.hash;
            $(this).find('img:not(.hoverImage)').hide();
            $(this).find('img.hoverImage').show();
        },function(){
            currentHash = window.location.hash;
            if(currentHash == $(this).attr('href')){
                $(this).find('img:not(.activeImage)').hide();
                $(this).find('img.activeImage').show();
            }else{
                $(this).find('img:not(.defaultImage)').hide();
                $(this).find('img.defaultImage').show();
            }
        });
    });
 },

メインページでこのコードを見てください:

        $('#contentContainer').jdAjaxContent({
            'defaultPage': 'home',
            'pathToLoadGif' : 'ajaxloading.gif'
        });
        $("#destroy").click(function(){
            console.log('destroy.click');
            $(this).jdAjaxContent('destroy');
        });

        //had to put this in its own window load, not sure why; weird bug
        $(window).load(function(){
            console.log('specialMenu.click');
            $('a[href^=#]').jdAjaxContent('specialMenu',
                {
                    'defaultImage': 'MenuIcons-01.png',
                    'hoverImage' : 'MenuIcons-02.png',
                    'activeImage' : 'MenuIcons-03.png'
                });
        });

破棄ビットを無視して、プラグインを削除します。それを取り出してください。
あなたの

$('#contentContainer').jdAjaxContent({
            'defaultPage': 'home',
            'pathToLoadGif' : 'ajaxloading.gif'
        });

$( '#contentContainer')は、あなたのAjaxが
にロードするコンテナです デフォルトのページはデフォルトのページです

pageToLoadGifは、通常表示される小さな読み込み用GIFへのパスです。

今あなたはまた見る必要があります

$('a[href^=#]').jdAjaxContent('specialMenu',
                {
                    'defaultImage': 'MenuIcons-01.png',
                    'hoverImage' : 'MenuIcons-02.png',
                    'activeImage' : 'MenuIcons-03.png'
                });

これはあなたの小さなメニューのことを行うビットです。 あなたはイメージが異なるので、それぞれ別々に行う必要があります。

$('a[href^=#]').each(function(){
     $(this).jdAjaxContent('specialMenu',
                {
                    'defaultImage': $(this).attr('defaultImage'),
                    'hoverImage' : '$(this).attr('hoverImage'),
                    'activeImage' : $(this).attr('activeImage')
                });
                });

次に、defaultImage = "blah"をあなたの中に入れます。

その他 すべての 'console.log'を '//console.log'に置き換えると、すべてのコンソールの内容が実際のWebサイトに表示されなくなります。

これが助けてくれることを願って、自分のAJAXエンジンを書くのがとても面白かったです。バグが見つかったり、[email protected]にコメントやメールを送ってください。

1
追加された
私はもう少し効率的になるように全部書き直すことができたが、メルボルンカップの日と私は今朝仕事をしているので少し難しい。私は質問をすぐに更新して、今はうまくいくものを用意します。私はすぐに仕事のためにこのような何かをする必要があり、私はあなたが盗作することができます私の書き換えられたコードで私の質問を再び更新病気今週来ることができます:)
追加された 著者 MrJD,
コードの一番下を見てください。私はデフォルトページを約に設定しました。私はチャンスがあるときに他のものを見てみましょう
追加された 著者 MrJD,
ありがとうございます、私は今、時間があるので、私は始めるつもりです。私に運が欲しい
追加された 著者 MrJD,
だから... 4時間ほど後に...やった。それを数秒で更新する
追加された 著者 MrJD,
ありがとう、私は問題を複雑にしていたと感じました!私のjQueryのスキルは限られているので、実際の例/いくつかの説明は素晴らしいでしょう。
追加された 著者 Nick,
ありがとう。私はあなたの現在のコードを試して、いくつかの奇妙なことを経験しています。サイトはホームページではなく、約ページで開き、連絡先フォームが開いたときに現在のページの葉が緑色のままになります(前に退色していますが、これは私が探している動作です)。しかし、大きなラッシュはありません。今週末に新しいコードを投稿できるのであれば、それは素晴らしいでしょう。常に盗難に喜ぶ!
追加された 著者 Nick,
おっと、申し訳ありませんが、私はそれに気づいたはずです!あなたからの便りを楽しみにしています...
追加された 著者 Nick,
答えたと印を付けられた賞金を与えられました。未解決の問題について簡単なコードと解決策があれば、私に知らせてください。ありがとう。
追加された 著者 Nick,

私はあなたが

$(window).trigger('hashchange');

準備完了イベント関数の内部

$(document).ready(function() {
    $(window).trigger('hashchange');
});
0
追加された