Войти

Авторизация

Логин:
Пароль:
Забыли пароль?
Регистрация
Сайт пользователей Artisteer и Themler. Официальный торговый представитель.

[РЕШЕНО] Раскрывающиеся блоки

Раскрывающиеся div блоки при помощи javascript
Захожу иногда
Dave
Сообщений: 49
717 дней назад
И снова я за помощью. :)

Хотел бы реализовать функцию раскрытия блоков в которых содержится контент, при клике на соответствующую кнопку... Но первый блок должен быть по умолчанию уже открыт. Хотелось бы сделать точно также, как
Скрытый текст виден только зарегистрированным пользователям
(первые три кнопки-картинки, кроме последней кнопки: печати).

Полагаю, что это реализуется при помощи div и javascript...

Заранее благодарю за отклик.

P.S.
По умолчанию Wordpress не поддерживает вставленный в пост javascript, поэтому приходится ещё думать, как его подключить в нужный пост без плагинов...
Редактировалось: 3 раза (Последний: 15 апреля 2015 в 06:59)
Постоянный участник
Handy
Медаль
Сообщений: 726
1 день назад
Dave:
Полагаю, что это реализуется при помощи div и javascript...

jquery


Dave:
Хотелось бы сделать точно также, как на этом сайте

По своей сути это табы, в виде картинок.

Можно попробовать найти в Яндексе что то подходящее по "jquery tabs"



Dave:
По умолчанию Wordpress не поддерживает вставленный в пост javascript, поэтому приходится ещё думать, как его подключить в нужный пост без плагинов...

Обычно скрипты подключается в шапку. А в самих контейнерах используются определенные дивы или ИД. Их редактор пропустит. joke

PS: Надо что бы как на указанном сайте один и тот же контент отображался по разному? Это не очень хорошая идея с точки зрения СЕО придется еще думать как делать что бы поиски не воспринимали дубли текста на одной странице.
Редактировалось: 2 раза (Последний: 15 апреля 2015 в 11:26)
качественное продвижение и раскрутка сайтов в сеопульте
Захожу иногда
Dave
Сообщений: 49
717 дней назад
jquery tabs
Вы правы, похоже это то, что надо. v Нашёл что-то похожее
Скрытый текст виден только зарегистрированным пользователям
. Огромное спасибо ^_^
Обычно скрипты подключается в шапку.

Разве это не скажется на скорости работы сайта? Я имею ввиду, скрипт будет подгружаться на всех страницах сайта, а необходим он будет только на некоторых страницах...

Это не очень хорошая идея с точки зрения СЕО

Тут, видимо, придётся выбирать что важнее: люди или оптимизация... скорее пусть будут люди :)

P.S.
Потом отпишусь, если получится сделать. Вдруг кому пригодится.
Редактировалось: 2 раза (Последний: 15 апреля 2015 в 11:58)
Постоянный участник
Степаныч
Медаль
Сообщений: 639
6 дней назад
Есть несколько нюансов.
1. Нужно найти неконфликтные табы с пред идущими скриптами, так как встречал конфликты.
2.
Dave:
Разве это не скажется на скорости работы сайта? Я имею ввиду, скрипт будет подгружаться на всех страницах сайта, а необходим он будет только на некоторых страницах...
Сама библиотека в Вордпрессе уже подключена, её второй раз подключать не надо. А сам скрипт включения обычно это несколько строк.

3.

Handi:
Это не очень хорошая идея с точки зрения СЕО

Как вариант заключать дубли в noindex, не очень но все таки.
Захожу иногда
Dave
Сообщений: 49
717 дней назад
Степаныч, Спасибо большое за подсказки smile


Как вариант заключать дубли в noindex, не очень но все таки.

Очень хорошая идея, наверное, дополнительно стоит заключить дублирующий текст в nofollow - чтоб наверняка :)
Редактировалось: 1 раз (Последний: 15 апреля 2015 в 12:26)
Захожу иногда
Dave
Сообщений: 49
717 дней назад
Ребят, совсем голова в последние дни не варит... скажите, пожалуйста, кто знает, как подключить
Скрытый текст виден только зарегистрированным пользователям
в нужный пост, чтобы работали блоки:
Код PHP:
  1. <div class="tabs">
  2.  
  3. <ul class="tabs__caption">
  4. <li class="active">1-я вкладка</li>
  5. <li>2-я вкладка</li>
  6. </ul>
  7.  
  8. <div class="tabs__content active">
  9. Содержимое первого блока
  10. </div>
  11.  
  12. <div class="tabs__content">
  13. Содержимое второго блока
  14. </div>
  15.  
  16. </div><!-- .tabs-->
И хотел узнать, обязательно ли прописывать тег <!-- .tabs--> в конце данного кода?
Постоянный участник
Степаныч
Медаль
Сообщений: 639
6 дней назад
Dave, Рекомендую посмотреть и выбрать здесь, скачать пример и посмотреть что и как сделано:
Скрытый текст виден только зарегистрированным пользователям


Самодельные вкладки вдруг не протестированы в разных браузерах?
Есть две вкладки, а понадобится третья?
И т.д.

Dave:
И хотел узнать, обязательно ли прописывать тег <!-- .tabs--> в конце данного кода?

Если все таки остановитесь на этих. Вначале из артистира экспортируйте дефолт в виде html страницы и на рабочем столе попробуйте вставить эти табы в любую страницу, что бы посмотреть что и как.
Захожу иногда
Dave
Сообщений: 49
717 дней назад
Степаныч, благодаря Вам
Скрытый текст виден только зарегистрированным пользователям
более простой и лёгкий вариант - то что нужно. dance

Только не работает... dash1 stuk следовал
Скрытый текст виден только зарегистрированным пользователям
инструкции:
1. Вставил в html редакторе div блоки.
2. Подключил CSS.
3. Создал JS файл и скопировал в него предлагаемый скрипт.
4. Вставил перед тегом </head> путь к файлу-скрипту
Код PHP:
  1. <script type="text/javascript" src="http://сайт/путь к файлу/Jqscript1.js"></script>
.

В итоге внешне правильные таблички-вкладки, но при клике на них текст их не раскрывается (остаётся скрытым), то есть скрипт не подключается (проверял через инструменты разработчика Ctr+Siftt+I, сам путь в шапке прописан).

артистира экспортируйте дефолт в виде html страницы и на рабочем столе попробуйте вставить эти табы в любую страницу, что бы посмотреть что и как

То есть скрипт может быть рабочими, но сама тема от артистера его не поддерживать? crazy
Редактировалось: 2 раза (Последний: 15 апреля 2015 в 22:29)
Постоянный участник
Степаныч
Медаль
Сообщений: 639
6 дней назад
Dave:
1. Вставил в html редакторе div блоки.
2. Подключил CSS.
3. Создал JS файл и скопировал в него предлагаемый скрипт.

По шагам все верно. Обычно стили добавляю в файл стилей темы.
А Скрипт можно отдельно или попробовать тоже в файл скрипта темы .js

Dave:
4. Вставил перед тегом </head> путь к файлу-скрипту

Там еще перед head надо вставить подключение:

Код PHP:
  1.  
  2. <script type="text/javascript">
  3. <!--
  4. $(document).ready(function(){
  5. $("#tabsholder").tytabs({
  6. tabinit:"2",
  7. fadespeed:"fast"
  8. });
  9. $("#tabsholder2").tytabs({
  10. prefixtabs:"tabz",
  11. prefixcontent:"contentz",
  12. classcontent:"tabscontent",
  13. tabinit:"3",
  14. catchget:"tab2",
  15. fadespeed:"normal"
  16. });
  17. });
  18. -->
  19. </script>
  20.  
Из него можно не нужный вариант убрать.


Dave:
То есть скрипт может быть рабочими, но сама тема от артистера его не поддерживать?

У некоторых может быть конфликт скриптов.
Редактировалось: 1 раз (Последний: 15 апреля 2015 в 22:38)
Захожу иногда
Dave
Сообщений: 49
717 дней назад
Степаныч, я на Вас молиться буду laugh drinks - заработало. smoke Спасибо огромное преогромное, ребят.

А где же Вы нашли последний скрипт? В статье о нём не говорится... никак не получается понять Jабу facepalm
Редактировалось: 2 раза (Последний: 15 апреля 2015 в 23:48)
Постоянный участник
Степаныч
Медаль
Сообщений: 639
6 дней назад
Dave:
А где же Вы нашли последний скрипт? В статье о нём не говорится... никак не получается понять Jабу

Тоже никак не получается facepalm laugh

Dave, хитрость простая, не зря написал выше про примеры и возможность скачать. Обычно скачиваю себе на стол и смотрю исходный код в примере что и как.
Принцип примерно у всех одинаковый.
Редактировалось: 1 раз (Последний: 16 апреля 2015 в 00:08)
Захожу иногда
Dave
Сообщений: 49
717 дней назад
Степаныч, ещё раз большое спасибо. v
|
Перейти на форум: