<div class="content">
  <div class="tabs">
    <div class="tabs-nav">
      <a class="tabs-nav__item js_tabs active" href="#skydive">Skydive</a>
      <a class="tabs-nav__item js_tabs" href="#base">BASE</a>
    <div class="tabs-wrapper">
      <div id="skydive" class="tabs-wrapper__item active">Parachuting (or skydiving from the English sky diving — literally translated as "diving from heaven") is one of the types of aviation sports associated with the use of parachutes. The goals and objectives of parachuting were constantly changing. If the parachute was originally intended to save lives, later it became an important element of landing training. Modern parachuting includes disciplines related to precise piloting of the dome, such as dome acrobatics, precision landing and swoop, as well as various artistic sports such as freestyle, free fall, group acrobatics and freefly</div>
      <div id="base" class="tabs-wrapper__item">Jumping with a special parachute from fixed objects: roofs of multi-storey buildings, bridges, cliffs, towers. Athletes jump from relatively low bases — usually 50-100 meters.</div>
html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;

.content {
  width: 80%;

.tabs {
  &-nav {
    margin-bottom: 20px;
    &__item {
      color: #333;
      font: 28px/28px "Verdana";
      text-decoration: none;
      opacity: .6;
      margin-right: 20px;
      &.active {
        opacity: 1;
  &-wrapper {
    &__item {
      font: 20px/30px "Verdana";
View Compiled
var tab = $('.tabs .tabs-wrapper > div'); 
	// Клики по вкладкам.
	$('.tabs .tabs-nav a').click(function(){
		$('.tabs .tabs-nav a').removeClass('active');
		return false;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js