CP.Content.Zakladki

Алгоритм самостоятельного создания закладок на странице

Создаем страницы

1. Создать новую страницу в контрольной панели (раздел "Внешний вид и контент", вкладка "Страницы", ссылка "Создать новую страницу"). Для примера пусть название страницы будет autoslovar (http://ААААА.ВВ/?page=autoslovar , где ААААА.ВВ - Ваш сайт)

2. Аналогично п.1 создать новые страницы для необходимых вкладок. Для примера str1, str2, и str3 (http://ААААА.ВВ/?page=str1 , http://ААААА.ВВ/?page=str2 , http://ААААА.ВВ/?page=str3 , где ААААА.ВВ - Ваш сайт)

Html-редактирование одной страницы

3. Перейти в редактирование инфоблока на странице autoslovar. Добавить маркированный список на страницу, где пунктами данного списка будут названия нужных Вам вкладок (названия, которые будут отображаться на сайте, например "Вкладка1", "Вкладка2" и "Вкладка3"). Сохранить изменения.

4. Перейти в html-редактирование ред.блока на странице autoslovar. Вместо <ul> прописываем первой строкой <ul class="fr-nav fr-nav-tabs clearfix"> .

5. Продолжаем html-редактирование ред.блока на странице autoslovar. Вместо <li>Вкладка1</li> прописываем <li><a href="?page=str1">Вкладка1</a></li> и так для каждой вкладки, т.е. в нашем примере вместо <li>Вкладка2</li> прописываем <li><a href="?page=str2">Вкладка2</a></li> и вместо <li>Вкладка3</li> прописываем <li><a href="?page=str3">Вкладка3</a></li>

Итого получаем:

<li><a href="/str1">Вкладка1</a></li>

<li><a href="/?page=str2">Вкладка2</a></li>

<li><a href="?page=str3">Вкладка3</a></li>

</ul>

6. Сохранить изменения.

Html-редактирование каждой страницы-вкладки

7. Перейти в html-редактирование ред.блока на странице (например) str1. Полностью копируем текст со страницы autoslovar в html-редактировании (см. выше).

8. Вместо <li><a href="?page=str1">Вкладка1</a></li> прописываем <li class="active"><a href="?page=str1">Вкладка1</a></li>. Остальные строки оставляем без изменения.

9. Аналогично п.8 меняем код в html-редактировании в ред.блоках на страницах остальных вкладок

Итого получаем для страницы str1:

<li class="active"><a href="?page=str1">Вкладка1</a></li>

<li><a href="?page=str2">Вкладка2</a></li>

<li><a href="?page=str3">Вкладка3</a></li>

</ul>

Итого получаем для страницы str2:

<li><a href="?page=str1">Вкладка1</a></li>

<li class="active"><a href="?page=str2">Вкладка2</a></li>

<li><a href="?page=str3">Вкладка3</a></li>

</ul>

Итого получаем для страницы str3:

<li><a href="?page=str1">Вкладка1</a></li>

<li><a href="?page=str2">Вкладка2</a></li>

<li class="active"><a href="?page=str3">Вкладка3</a></li>

</ul>

Как вы видите, для того, чтобы сделать вкладку активной, нужно добавить тегу

класс active. При добавлении этого класса, на данной странице вкладка всегда будет активной. Сохраняем изменения, размещаем страницу, содержащую вкладки в меню 10. Не забываем сохранять изменения. Просмотреть результаты работы можно по ссылке http://ААААА.ВВ/?page=autoslovar , где ААААА.ВВ - Ваш сайт. 11. Когда изменения будут закончены, размещаете страницу в меню.

Для сайтов на виртуальной платформе

Если у вас используется настройка внешнего вида сайта с помощью тем (сейчас она на стадии бета-тестирования), то вам следует соблюдать эти же рекомендации но с другим описанием ссылок.

Создаем страницы

1. Создать новую страницу в контрольной панели (раздел "Внешний вид и контент", вкладка "Страницы", ссылка "Создать новую страницу"). Для примера пусть название страницы будет autoslovar (http://ААААА.ВВ/autoslovar , где ААААА.ВВ - Ваш сайт)

2. Аналогично п.1 создать новые страницы для необходимых вкладок. Для примера str1, str2, и str3 (http://ААААА.ВВ/str1 , http://ААААА.ВВ/str2 , http://ААААА.ВВ/str3 , где ААААА.ВВ - Ваш сайт)

Html-редактирование одной страницы

3. Перейти в редактирование ред.блока на странице autoslovar. Добавить маркированный список на страницу, где пунктами данного списка будут названия нужных Вам вкладок (названия, которые будут отображаться на сайте, например "Вкладка1", "Вкладка2" и "Вкладка3"). Сохранить изменения.

4. Перейти в html-редактирование ред.блока на странице autoslovar. Вместо <ul> прописываем первой строкой <ul class="fr-nav fr-nav-tabs clearfix"> .

5. Продолжаем html-редактирование ред.блока на странице autoslovar. Вместо <li>Вкладка1</li> прописываем <li><a href="/str1/">Вкладка1</a></li> и так для каждой вкладки, т.е. в нашем примере вместо <li>Вкладка2</li> прописываем <li><a href="/str2/">Вкладка2</a></li> и вместо <li>Вкладка3</li> прописываем <li><a href="/str3/">Вкладка3</a></li>

Итого получаем:

<li><a href="/str1/">Вкладка1</a></li>

<li><a href="/str2/">Вкладка2</a></li>

<li><a href="/str3/">Вкладка3</a></li>

</ul>

6. Сохранить изменения.

Html-редактирование каждой страницы-вкладки

7. Перейти в html-редактирование ред.блока на странице (например) str1. Полностью копируем текст со страницы autoslovar в html-редактировании (см. выше).

8. Вместо <li><a href="/str1/">Вкладка1</a></li> прописываем <li class="active"><a href="/str1/">Вкладка1</a></li>. Остальные строки оставляем без изменения.

9. Аналогично п.8 меняем код в html-редактировании в ред.блоках на страницах остальных вкладок

Итого получаем для страницы str1:

<li class="active"><a href="/str1/">Вкладка1</a></li>

<li><a href="/str2/">Вкладка2</a></li>

<li><a href="/str3/">Вкладка3</a></li>

</ul>

Итого получаем для страницы str2:

<li><a href="/str1/">Вкладка1</a></li>

<li class="active"><a href="/str2/">Вкладка2</a></li>

<li><a href="/str3/">Вкладка3</a></li>

</ul>

Итого получаем для страницы str3:

<li><a href="/str1/">Вкладка1</a></li>

<li><a href="/str2/">Вкладка2</a></li>

<li class="active"><a href="/str3/">Вкладка3</a></li>

</ul>

Сохраняем изменения, размещаем страницу, содержащую вкладки в меню

10. Не забываем сохранять изменения. Просмотреть результаты работы можно по ссылке http://ААААА.ВВ/autoslovar , где ААААА.ВВ - Ваш сайт.

11. Когда изменения будут закончены, размещаете страницу в меню.