JS Animated. Как работать с макетом вкладок

Из этого туториала Вы узнаете, как работать с макетом вкладок в JS-анимированных шаблонах.

1. Используя FTP или Файловый менеджер, откройте файл index.html для редактирования:

   

2. В HTML шаблоне сайта используется расширение ResponsiveTabs.js, которое позволяет отобразить вкладки. Для того чтобы добавить вкладки на нужные страницы, используйте следующую структуру кода:

   <div class="responsive-tabs">
       <ul class="resp-tabs-list">
           <li> Tab #1  </li>
           <li> Tab #2  </li>
           <li> Tab #3  </li>
   	<li> Tab #4  </li>
       </ul>
   
       <div class="resp-tabs-container">
           <div> Tab 1 Body </div>
           <div> Tab 2 Body </div>
           <div> Tab 3 Body </div>
   	<div> Tab 4 Body </div>
       </div>
   </div>	
   	

   

3. Вернитесь на вашу домашнюю страницу, для того чтобы увидеть созданные вкладки. Убедитесь, что Вы обновили страницу:

   

Вы можете также ознакомиться с детальным видео-туториалом ниже: