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>
Итого получаем:
<ul class="fr-nav fr-nav-tabs clearfix">
<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:
<ul class="fr-nav fr-nav-tabs clearfix">
<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:
<ul class="fr-nav fr-nav-tabs clearfix">
<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:
<ul class="fr-nav fr-nav-tabs clearfix">
<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>
Как вы видите, для того, чтобы сделать вкладку активной, нужно добавить тегу
Для сайтов на виртуальной платформе
Создаем страницы
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>
Итого получаем:
<ul class="fr-nav fr-nav-tabs clearfix">
<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:
<ul class="fr-nav fr-nav-tabs clearfix">
<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:
<ul class="fr-nav fr-nav-tabs clearfix">
<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:
<ul class="fr-nav fr-nav-tabs clearfix">
<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. Когда изменения будут закончены, размещаете страницу в меню.