JQuery'yi kullanarak geçerli sayfa/sekme için bir div sınıfına efekt uygulama

Gezinme çubuğumda bu sayfa 'daki üç yaprakım var. Her yaprak bölümü, mutlak konumlandırma ve farklı z-indekslerine sahip div sınıflarından oluşan bir nav linki olup, böylece kahverengi üzerinde yeşil yapraklarda solulabilir.

Sayfalar arasında bir geçiş geçişi de vardır, bu da CSS kodları .

bu jsfiddle (komut dosyası aynı zamanda sayfalar arası geçişler için kod içerir).

Çatıştığım bölüm şu anki sayfa için ".current" (içeri ve dışarı soluk yeşil yaprakları içeren) div sınıfına nasıl başvurulacağıdır. Web sayfası ilk açıldığında, ana sayfada veya sayfadaki sayfada, sayfanın yüklü olduğu durumlarda, sayfanın yüklendiği sayfadaki yeşil yaprağın donukluk olarak ayarlanması için şunu yapmam gerekiyor: kullanıcı yüklemek için bir sayfaya tıklar, ancak sayfa ilk yüklendiğinde değil).

Her sayfa için CSS'de .current sınıfının opaklığını ayarlayabilirim, ancak hashchange yöntemini kullanarak, yalnızca # ana içerik için HTML değiştirildi, bu yüzden işe yaramazdı. Bunun javascriptimde bir yolunu bulmam gerektiğini, bir şekilde geçerli sayfaya/sekmeye atıfta bulunacağımı varsayalım.

Bununla ilgili olarak, geçerli sayfa için yeşil yaprakların opaklığını, .close div/link için tıklama işleyicisinde nasıl değiştirdiğimi, yani ana sayfa etkinken iletişim formu kapatılırsa, ana sayfa yeşil yaprağının solması (geçerli sayfa olduğu gibi) ve yaklaşık sayfa ile aynı. Yine, tıklama işleyicisinde geçerli sayfaya/sekmeye yönlendirmenin bir yolunu bulmam gerektiği anlaşılıyor.

Biri bunun için yardımcı olabilir mi?

Teşekkürler,

Nick

3

2 cevap

Vay, bu kafa karıştırıcı, Durumunuzu karmaşıklaştırmak gibi görünüyor. Sayfaya özel CSS'ye veya bunun gibi bir şeye ihtiyacınız yoktur, sadece farklı bir zamanda .current sınıfını ayarlamanız gerekir.

Biri web sitenize gittiğinde, ne yüklendiğini veya yüklenmediğini bilirsiniz.

Şimdi, temelde sayfa yüklemesinde hashtag'e bakmanız gerekiyor, eğer orada bir tane varsa ve eğer doğruysa (sizin hesapladığınız gerçek bir sayfa olduğu gibi) o anda o sayfayı yüklediğiniz gibi yüklediğinizde ayrıca yaprağı vurgulayın.

Aslında, tüm öğenizi .current yaprağında basitleştirebilirsiniz

Bilgiyi yüklediğinizde gerçekten 'yaprak' sadece 'geçerli' dir. Böylece bilgi yüklendiğinde ve $ sargıcınızın içine yerleştirildiğinde, soluklaşır ve canlandırılır; o zaman.

Açıklamaya veya çalışma örneğine ihtiyacınız varsa yorum yapın:)


Güncelleme - Hızlı çözüm

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


Güncelleme - yeni kod:)

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

Bir kaç dosya var, bu yüzden bir JSfiddle'a bağlayamadım

Doğru, çalışmam için tüm soluk menüyü alamadım ama normal bir vurgulu gibi gösterdim/saklandım. Daha sonra ona bakabilirim ama nasıl yapacağınızı bildiğinizden, bunu anlayabileceğinizi düşünüyorum. Sadece JavaScript dosyasına gidin ve bunun için bakın:

    $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();
            }
        });
    });
 },

Şimdi ayarlamak için ana sayfada bu koda bakın:

        $('#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'
                });
        });

Sadece eklentiden kurtulan yok etme biti görmezden gelmek; Çıkar onu. İlginizi çeken

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

$ ('# contentContainer') ajax'inizin içine yüklendiği kapsayıcıdır. varsayılan sayfa varsayılan sayfa ha
pageToLoadGif, genellikle görüntülenen küçük yükleme gifinin yoludur.

Şimdi de bakmanız gerekecek

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

Bu küçük menü şey yapan bit. Farklı resimlere sahip olduğunuzdan, her birini ayrı ayrı yapmanız gerekecek, bunun gibi bir şey:

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

Sonra defaultImage = "blah" ifadesini koyduysanız,

AYRICA
Tüm konsol parçalarının gerçek web sitenizde görünmemesi için tüm 'console.log' yerine '//console.log' yerine bir değişiklik yapın.

Bunun yardımcı olacağını umuyorum, kendi ajax motorumu yazmak çok ilginç buldum, herhangi bir hata bulursanız ya da daha fazla yardıma ihtiyaç duyarsanız sadece yorum yapın veya [email protected] adresinden bana e-posta gönderin

1
katma
Her şeyi biraz daha verimli olacak şekilde yeniden yazabilirim, ama melbourne fincan günü ve bu sabah işte çalışıyorum, bu yüzden biraz zor. Şu an için çalışacak bir şeyle sorunun hızlı bir güncellemesini yapacağım. Bu iş için yakında böyle bir şey yapmalıyım ve bu hafta sonu gelebilirim, tekrar edindiğim yeniden yazılan kodumla soruyu tekrar sorunum :)
katma yazar MrJD, kaynak
Kodun dibine bak. Varsayılan sayfa ayarlanmıştı. Bir şansım olduğunda başka şeylere bakacağım
katma yazar MrJD, kaynak
Teşekkürler dostum, biraz zamanım var, bu yüzden başlamak üzereyim. Bana şans dileyin haha
katma yazar MrJD, kaynak
Yani ... 4 saat ya da daha sonra ... bitti. Bir saniyede güncellemem
katma yazar MrJD, kaynak
Teşekkürler, ben çok karmaşık bir konu olduğunu hissettim! Benim jQuery becerilerim sınırlıdır, bu yüzden çalışan bir örnek/bazı açıklamalar harika olurdu.
katma yazar Nick, kaynak
Teşekkürler. Mevcut kodunuzu denedim ve birkaç tuhaf şeyler yaşıyorum. Site, ana sayfadan ziyade sayfa açılır ve geçerli sayfa için yaprak iletişim formu açıldığında yeşil kalır (Daha önce soluklaşır, bu benim aradığım davranışdır). Yine de büyük bir acele yok, bu yüzden bu haftasonu yeni kod gönderebilirseniz, bu harika olurdu. Her zaman intihalden mutlu!
katma yazar Nick, kaynak
Oops, üzgünüm, bunu fark etmeliydim! Cevabınızı sabırsızlıkla bekliyorum...
katma yazar Nick, kaynak
Cevaplı ve uygulamalı ödül olarak bir soru var. Bekleyen konular için basitleştirilmiş kod ve çözümleriniz varsa bana bildirebilirsiniz. Teşekkürler.
katma yazar Nick, kaynak

Sanırım sarmalısın

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

hazır olay fonksiyonunun içinde

$(document).ready(function() {
    $(window).trigger('hashchange');
});
0
katma