Войти

Авторизация

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

[РЕШЕНО] Как сделать вкладки?

Как сделать такие вкладки в Artisteer?
Посетитель
p_i_p
Сообщений: 12
512 дней назад
Доброго дня. Прошу дать совет как можно сделать в программе такие вкладки как на рисунке. Очень надо. Спасибо тем кто откликнется.
Прикрепленные файлы:
vkladki_550065f917eeb.jpg | 26.22 Кб | Скачали: 56 раз
Постоянный участник
Степаныч
Медаль
Сообщений: 639
6 дней назад
p_i_p:
Прошу дать совет как можно сделать в программе такие вкладки как на рисунке.

В программе нет возможности вставлять посторонние скрипты, необходимые для этого.

Можно сделать только в ручную уже после экспорта шаблона.

Эти вкладки называются табы. Наберите в поисковике tabs jquery, Инструкций и реализаций очень много.
С описанием как сделать.
Посетитель
p_i_p
Сообщений: 12
512 дней назад
Степаныч:
Эти вкладки называются табы. Наберите в поисковике tabs jquery, Инструкций и реализаций очень много.
С описанием как сделать.

Нашел такие:
Скрытый текст виден только зарегистрированным пользователям


Только у них фон темный надо немного посветлее. sad
Можно поменять?
Постоянный участник
Handy
Медаль
Сообщений: 726
1 день назад
p_i_p:
Только у них фон темный надо немного посветлее.

Надо в этом

Код PHP:
  1.  
  2. div.tabs {
  3. background: #333;
  4. padding: 1em;
  5. }
  6.  
поменять в background: #333; на свой цвет. music
качественное продвижение и раскрутка сайтов в сеопульте
Посетитель
p_i_p
Сообщений: 12
512 дней назад
Не пойму как сделать и куда вставлять коды. scratch
Постоянный участник
Handy
Медаль
Сообщений: 726
1 день назад
1. Нужно открыть в Notepad++ все страницы .html в папке home и Blog Posts тоже и вставить в них перед тегом </head>
JavaScript код, не забыв заключить его в соответствующие теги для скрипта так:

Код PHP:
  1.  
  2. <script>
  3. $(function () {
  4. var tabContainers = $('div.tabs > div'); // получаем массив контейнеров
  5. tabContainers.hide().filter(':first').show(); // прячем все, кроме первого
  6. // далее обрабатывается клик по вкладке
  7. $('div.tabs ul.tabNavigation a').click(function () {
  8. tabContainers.hide(); // прячем все табы
  9. tabContainers.filter(this.hash).show(); // показываем содержимое текущего
  10. $('div.tabs ul.tabNavigation a').removeClass('selected'); // у всех убираем класс 'selected'
  11. $(this).addClass('selected'); // текушей вкладке добавляем класс 'selected'
  12. return false;
  13. }).filter(':first').click();
  14. });
  15. </script>
  16.  
2. В файл стилей style.css в самый конец добавить:
Код PHP:
  1.  
  2. div.tabs {
  3. background: #333;
  4. padding: 1em;
  5. }
  6.  
  7. div.container {
  8. margin: auto;
  9. width: 90%;
  10. margin-bottom: 10px;
  11. }
  12.  
  13. ul.tabNavigation {
  14. list-style: none;
  15. margin: 0;
  16. padding: 0;
  17. }
  18.  
  19. ul.tabNavigation li {
  20. display: inline;
  21. }
  22.  
  23. ul.tabNavigation li a {
  24. padding: 3px 9px;
  25. background-color: #666;
  26. color: #000;
  27. text-decoration: none;
  28. }
  29.  
  30. ul.tabNavigation li a.selected,
  31. ul.tabNavigation li a.selected:hover {
  32. background: #FFF;
  33. color: #000;
  34. }
  35.  
  36. ul.tabNavigation li a:hover {
  37. background: #ccc;
  38. color: #000;
  39. }
  40.  
  41. ul.tabNavigation li a:focus {
  42. outline: 0;
  43. }
  44.  
  45. div.tabs div {
  46. padding: 5px;
  47. margin-top: 3px;
  48. border: 1px solid #FFF;
  49. background: #FFF;
  50. }
  51.  
  52. div.tabs div h2 {
  53. margin-top: 0;
  54. }
  55.  
3. Добавлять на нужные страницы сами закладки, исправив тексты на свои:

Код PHP:
  1.  
  2. <h1>Цитаты</h1>
  3. <div class="tabs">
  4. <!-- Это сами вкладки -->
  5. <ul class="tabNavigation">
  6. <li><a class="" href="#first">Д.Огилви</a></li>
  7. <li><a class="" href="#second">Миллер</a></li>
  8. <li><a class="" href="#third">Черчилль</a></li>
  9. </ul>
  10. <!-- Это контейнеры содержимого -->
  11. <div id="first">
  12. <h2>Д.Огилви</h2>
  13. <p>Лучший способ превратить работника в генератор идей это возложить на него самую высокую ответственность.</p>
  14. </div>
  15. <div id="second">
  16. <h2>Миллер</h2>
  17. <p>Деньги не имеют значения — пока они у вас есть.</p>
  18. </div>
  19. <div id="third">
  20. <h2>Черчилль</h2>
  21. <p>Пессимист видит трудности при каждой возможности; оптимист в каждой трудности видит возможности.</p>
  22. </div>
  23. </div>
  24.  
Как то так. music
качественное продвижение и раскрутка сайтов в сеопульте
Посетитель
p_i_p
Сообщений: 12
512 дней назад
Всем спасибо за помощь. Попробовал, получилось.
|
Перейти на форум: