Застосування ефектів до класу div для поточної сторінки/вкладки за допомогою jQuery

У мене є три листи в навігаційній панелі на цій сторінці . Кожна секція листа являє собою неіснуючу зв'язок, що складається з класів div із абсолютним позиціонуванням та різними z-індексами, так що я можу зникати зеленим листям над коричневим.

Існує також затухаючий перехід між сторінками, який базується на динамічному методі зміни сторінок на Трюки CSS , яка використовує зміну для зміни сторінок.

Ви можете побачити весь код, що стосується згасання листя на навігаційній панелі, на цій скрипці (у скрипті також міститься код переходів між сторінками).

Частина, з якою я борюся, полягає в тому, як називати розділ div ".current" (який містить зелене листя, яке вичерпується і виходить) для поточної сторінки. Мені потрібно це зробити так, щоб, коли веб-сайт був відкритий на головній сторінці або на сторінці, зелений лист для поточної сторінки встановлений на непрозорість: 1, коли сторінка завантажується (це відбувається, коли користувач натискає сторінку, щоб завантажити її, але не при першому завантаженні сторінки).

Я міг встановити непрозорість поточного класу у CSS для кожної сторінки, але за допомогою методу хешування міняється лише HTML для # main-content, тому це не спрацює. Я припускаю, що мені потрібно знайти спосіб налаштування цього в моєму javascript, дещо посилаючись на поточну сторінку/вкладку.

З цим пов'язано, як я змінюю непрозорість зеленого листа для поточної сторінки в обробнику кліків для .close div/link, тобто якщо контактна форма закрита, коли домашня сторінка активна, зелена сторінка домашньої сторінки буде зникати в (як це є поточна сторінка), і те ж саме з приблизно сторінкою. Знову ж таки, мені здається, мені потрібно знайти спосіб посилання на поточну сторінку/вкладку обробника кліків.

Чи може хтось допомогти мені з цим?

Дякую,

Нік

3

2 Відповіді

Вау, це незрозуміло, Здається, що ваша над ускладнює ситуацію. Вам не потрібні спеціальні CSS-сторінки або що-небудь подібне, Вам просто потрібно встановити поточний клас в інший час.

Коли хтось переходить на ваш веб-сайт, ви будете знати, що таке #tag вони завантажують, або якщо їх немає.

Зараз, в основному, на сторінці завантаження ви повинні дивитися на хештегом, якщо є один там, і якщо це правильно (в тому, що його фактична сторінка ви складали), то ви просто завантажте цю сторінку, як ви робите в даний момент, але також виділіть лист.

Ви могли б фактично спростити все це на поточному аркуші

Дійсно, "лист" є лише "поточним", коли ви завантажуєте інформацію. Отже, коли інформація завантажується та поміщається всередині вашої обгортки $, вичерпується і анімована; Покладіть свій поточний.

Коментувати, якщо вам потрібен роз'яснення або робочий приклад:)


Оновлення - швидке рішення

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" у вашому, так воно буде виглядати

ALSO
Знайдіть замін на "console.log" на "//console.log", щоб всі матеріали консолі не відображалися на вашому фактичному веб-сайті.

Я сподіваюсь, що це допомагає. Мені було дуже цікаво написати свій власний движок ajax, якщо ви знайдете якісь помилки або вам потрібна додаткова допомога, просто прокоментуйте або напишіть мені на адресу [email protected]

1
додано
Я міг би переписати все, щоб бути трохи більш ефективним, але його Мельбурн чашка день, і я на роботі цього ранку, так що його трохи складно. Я швидко оновлюю запитання з тим, що зараз працюватиме. Скоріше мені потрібно зробити щось подібне для роботи, і я можу це зробити у вихідні дні, погано оновлю моє запитання знову з моїм переписаним кодом, який можна плагіати :)
додано Автор MrJD, джерело
Подивіться на нижню частину коду. Я встановив сторінку за умовчанням приблизно. Я погляну на інші речі, коли я отримаю шанс
додано Автор MrJD, джерело
Спасибі подрузі, у мене є якийсь час, тому я збираюся розпочати. Побажати мені удачі ха-ха
додано Автор MrJD, джерело
так ... 4 години або близько того ... зроблено. Невдало оновити його за секунду
додано Автор MrJD, джерело
Спасибі, у мене було почуття, що я надто ускладнив питання! Мої навички jQuery обмежені, тому робочий приклад/деяке роз'яснення було б чудово.
додано Автор Nick, джерело
Дякую. Я спробував ваш поточний код і переживаю кілька дивних речей. Сайт відкривається на сторінці навколо сторінки, а не на домашній сторінці, а аркуш поточної сторінки залишається зеленим, коли відкривається контактна форма (воно раніше згасло, що я шукаю). Там немає великої спеки, хоча, так що якщо ви можете опублікувати новий код в ці вихідні, це було б чудово. Завжди раді плагіату!
додано Автор Nick, джерело
На жаль, вибачте, я б це зауважив! Я з нетерпінням чекаю від вас ...
додано Автор Nick, джерело
Відмітивши питання як відповідав і застосував щедрість. Сподіваюся, ви можете повідомити мені, чи маєте ви спрощений код та рішення для невирішених питань. Дякую.
додано Автор Nick, джерело

Я думаю, ви повинні обернути

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

всередині готової функції події

$(document).ready(function() {
    $(window).trigger('hashchange');
});
0
додано