Вкладки на jQuery — Uskova Ekaterina

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>

<div class="tabs">
   
   <ul class="tab-header">
      <li class="tab-header__item js-tab-trigger active" data-tab="1">JavaScript</li>
      <li class="tab-header__item js-tab-trigger" data-tab="2">Jquery</li>
      <li class="tab-header__item js-tab-trigger" data-tab="3">DOM</li>
     <li class="tab-header__item js-tab-trigger" data-tab="4">CSS</li>
   </ul>
   
   
   <ul class="tab-content">
      <li class="tab-content__item js-tab-content active" data-tab="1">
         <p>JavaScript — прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript.</p>
			<p>JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.</p>
      </li>
      <li class="tab-content__item js-tab-content" data-tab="2">
        <p> jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Сейчас разработка jQuery ведётся командой jQuery во главе с Джоном Резигом.</p>
      </li>
      <li class="tab-content__item js-tab-content" data-tab="3">
         <p>DOM — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.</p>
      </li>
     <li class="tab-content__item js-tab-content" data-tab="4">
         <p>CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.</p>
      </li>
   </ul>
</div>

.tabs {
    width: 500px;
    margin: 0 auto;
    border: 2px solid #8B00FF;
    border-radius: 10px;
    padding: 15px;
    font-family: Arial;
    background: #E6E6FA;
}

/* Стили для списка вкладок */
.tab-header {
   list-style: none;
   padding-left: 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin: 0;
}

/* Стили для вкладки */
.tab-header__item {
    display: inline-block;
    color: #ffffff;
    white-space: nowrap;
    font-family: Arial;
    font-size: 19px;
    padding: 5px 20px;
    background: #660099;
    cursor: pointer;
    border-radius: 10px 10px 0 0;
    transition: all .10s;
   
    
}

/* Стили для активной вкладки */
.tab-header__item.active {
   color: #9400D3;
   border-bottom: none;
   position: relative;
   background-color: #ffffff;
   font-weight: bold;
}

/* Стиль для списка контейнеров с содержимым вкладок */
.tab-content {
   list-style: none;
   padding: 0;
   margin: 0;
   font: 18px Montserrat;
   text-align: justify;
}

/* Стили для контейнера с содержимым вкладки. По умолчанию скрыт. */
.tab-content__item {
   display: none;
   padding: 20px;
   border: 1px solid #ddd;
   margin-top: -1px;
   background-color: #ffffff;
}

/* Стили для активного контейнера вкладки */
.tab-content__item.active {
   display: block;
}

Results:

JavaScript
Jquery
DOM
CSS

JavaScript — прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript.

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Сейчас разработка jQuery ведётся командой jQuery во главе с Джоном Резигом.
DOM — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.
CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Results:

Добавить комментарий Отменить ответ