Спойлер за сайта
По време на процеса, открих, че този код работи без никакви проблеми на интернет страниците, написани на нормален HTML, CMS Сатус и WordPress. Но сигурен, че на всички други двигатели ще работи добре. Така че за да започнете!
На първо място, това, което е спойлера? Опишете да непосветените. Спойлер - такъв дизайн, който поддържа съдържанието на сайта, първоначално скрита за потребителя. Въпреки това, той е отворен за търсачките, няма негативен ефект върху класирането на сайт в търсачките. Когато кликнете върху линка, разкрива скрито съдържание.
Защо се прави това? Като цяло, за красота ... Например, дизайна на сайта не включва поставяне на голям текст на началната страница, но тази страница ще бъде популяризиран в търсачките. И за насърчаване на сериозни запитвания, както знаем, ние се нуждаем от достатъчно обемист текст за по-добро класиране.
Говорете за спойлери може да бъде дълго време, но както се казва, по-добре да се види веднъж от чуят стотици пъти. Вижте примерите по-долу спойлера.
Пример спойлер. Кликнете върху линка ...
Ето текста, изображенията или друго съдържание.
Да вървим. Кодът по-долу, трябва да се постави между маркерите
, ако спойлера да се използва на няколко страници. Ако не, тогава просто го поставете в тялото на страницата, на която ще бъде на разположение спойлер (както направих аз на тази страница). Така че, кода:А глава и тяло на спойлер се поставя в следния код:
По принцип, всичко работи, но не е точно така, както би било необходимо. Ако просто поставете кодовете, представени по-горе, съдържанието на спойлера веднага ще се отвори. За да се отървете от тази "болест" трябва да бъде в CSS (Стиловете), за да добавите следното:
div.spoiler дисплей div.text: няма;
>
Ами в общи линии това е всичко! Ако сте направили всичко както е написано тук, спойлер ще работи без проблеми. Ако имате някакви проблеми, моля пишете!
Всички необходими параметри стилове предписва тук:
div.spoiler div.name // колекторни стилове
div.spoiler div.text // стилове за основното съдържание
Готово! Обърнете внимание!
Ние трябва да се промени сценария малко и се добавят няколко правила в CSS.
Ето един модифициран скрипт:
$ (Документ) .ready (функция () $ ( "div.spoiler div.name педя"). Toggle (функция () $ (това) .parent ( "div.name"). Родител ( "div.spoiler") . .children ( "div.text") показват ();
$ (Настоящото) .parent ( "div.name") CSS ( "backgroundPosition", "0 0") .;
>, Функция () $ (това) .parent ( "div.name") родител ( "div.spoiler") деца ( "div.text") скрий () ...;
$ (Настоящото) .parent ( "div.name") CSS ( "backgroundPosition", "0 -27px") .;
>);
>);
И тук CSS:
.спойлер подложка ляв: 20px;
>
div.spoiler височина div.name: 27px;
курсора: указател;
текст-украса: подчертае;
цвят: # 003399;
фон: URL ( "../ изображения / spoiler.jpg") не-повторение 0 -27px;
уплътнение ляв: 25 пкс;
>
div.spoiler дисплей div.text: няма;
подложка: 10px 10px 0px 25 пкс;
>
За да подадете spoiler.jpg правилно укажете пътя, аз имам този размер спрайт 12h54, и от тази -27px в кода в картинката минус върха, плюс дъното.
"Всички необходими параметри стилове предписва тук:
div.spoiler div.name // колекторни стилове
div.spoiler div.text // стилове за основното съдържание "
Не мога да разбера къде е да се определи? Просто не разбирам къде да се регистрират на фразата, в която спойлера по подразбиране е затворен?
един и същи код, който ви е дал.
$ (Документ) .ready (функция () $ ( «div.spoiler div.name педя»). Toggle (функция () $ (това) .parent ( «div.name»). Родител ( «div.spoiler») .children ( «div.text») (), за .;
$ (Това) .parent ( «div.name») родител ( «div.spoiler») CSS ( «backgroundPosition», »-15px 0") ..;
>, Функция () $ (това) .parent ( «div.name») родител ( «div.spoiler») деца ( «div.text») скрий () ...;
$ (Това) .parent ( «div.name») родител ( «div.spoiler») CSS ( «backgroundPosition», »0 -15px») ..;
>);
>);
Ето как да го използвам.
(Франция) - Перно / Перно
0.7 литра бутилка. 2800 търкайте. Порция 50 мл. 200 рубли.
Това е за pisyvaya в CSS, че ме искаш да клас:
div.spoiler div.opisanie
и тя не работи.
Както обявен в сценария?
Аз разбирам, че сте текст спойлер е затворена в Разделение Slassi «opisanie»? Ако е така, тогава в един скрипт, променете го тук: div.text при тук е: div.opisanie
Благодаря ви за spoller. Само съм го не stranatse добре в блока, и не изглежда много добре ((
Може би си струва да се малко Дрю стилове ниво, за да е красива?
Благодаря ви, спести много време - решение за собствените си ще се търси за дълго време)) всичко работи добре)
Благодаря за спойлера! Какво ви трябва. Всичко работи.
Само ми кажи как да се направи, че той е затворен, не само с щракване върху заглавието на спойлер, но когато щракнете върху страницата, в допълнение към спойлера.
Плюс това аз също бих искал да видя, когато кликнете върху друг спойлер (имам няколко на страницата), а другият, когато е отворена - затворена.
$ ( "Div.spoiler div.name педя"). Toggle (функция ()
Обмяна тук педя да Разделения
Пример спойлер. Кликнете върху линка ...
и тук.
Попитай го също подходящи параметри за височина и ширина. Например, 100% и 40px