tabs 0.0.9

js.jquery.js

function tabs() {
    $('.tabs-block').on('click', '.nav-link', function (event) {
        event.preventDefault();
        let $this = $(this),
            href = $this.attr('href');

        if ($(href).length) {
            $('.tabs-link a').removeClass('active');
            $this.addClass('active');
            $('.tabs-content .tab-content__inner').removeClass('active');
            $(href).addClass('active');
        }
    });
}

js.vanila.js

function tabs() {
    var elements = document.querySelectorAll('.tabs-block .nav-link');
    Array.prototype.forEach.call(elements, function(el, i){
        el.addEventListener('click', function (event) {
            event.preventDefault();

            let $this = el,
                href = $this.getAttribute('href'),
                activeTab = document.querySelectorAll('.tabs-link a'),
                tabContent = document.querySelectorAll('.tabs-content .tab-content__inner'),
                tab = document.querySelector(href);

            if (tab.length) {
                Array.prototype.forEach.call(activeTab, function(el, i){
                    console.log(el);
                    el.classList.remove('active');
                });

                $this.classList.add('active');
                Array.prototype.forEach.call(tabContent, function(el, i){
                    el.classList.remove('active');
                });
                $('.tabs-content .tab-content__inner').removeClass('active');

                Array.prototype.forEach.call(tab, function(el, i){
                    el.classList.add('active');
                });
            }
        });
    });
}

style.css

.tabs-block {
    margin-top: 30px;
}

.tabs-link {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
}
.tabs-link .nav-link {
    color: #000;
    flex-basis: 100%;
    padding-bottom: 18px;
    margin-right: 10px;
    text-decoration: none;
    outline: none;
    white-space: nowrap;
}
.tabs-link .nav-link:hover {
    color: #000;
}
.tabs-link .nav-link.active {
    color: #000;
    background-color: #fff;
    border-bottom: 1px solid #000;
}
.tabs-link .nav-link:last-child {
    margin-right: 0;
}
.tabs-link .nav-link.swiper-slide {
    flex-basis: initial;
}

.tabs-content {
    width: 100%;
}
.tabs-content .tab-content form {
    padding-top: 60px;
}
.tabs-content .tab-content__inner {
    display: none;
    padding: 0 0 40px;
    border-radius: 4px;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
}
.tabs-content .tab-content__inner.active {
    display: block;
    background-color: #fff;
}
.tabs-content p {
    color: #0e0d12;
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    margin-bottom: 35px;
}
.tabs-content p.title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
}
.tabs-content .persona-tools {
    padding: 0 0 45px 0;
}

tabs.html

<div class="tabs-block">
    <nav class="nav tabs-link">
        <a class="nav-link active" href="#tab1">Tab1</a>
        <a class="nav-link" href="#tab2">Tab2</a>
        <a class="nav-link" href="#tab3">Tab3</a>
        <a class="nav-link" href="#tab4">Tab4</a>
    </nav>
</div>
<div class="tabs-content">
    <div id="tab1" class="active tab-content__inner">
        <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor facilis in numquam qui vitae. Aspernatur
                at labore necessitatibus non numquam odio possimus quas recusandae, repellat reprehenderit, rerum sed
                tempora voluptatem.</p>
        </div>
    </div>
    <div id="tab2" class="tab-content__inner">
        <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem facilis id in quas. Ad assumenda,
                consequuntur corporis nam nulla quisquam ratione ut. Corporis cum maiores molestias officiis praesentium
                ut vero.</p>
        </div>
    </div>
    <div id="tab3" class="tab-content__inner">
        <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aperiam aut beatae corporis
                dolorum eius est fugiat, hic natus nesciunt omnis quibusdam repudiandae similique sit tempora tenetur
                vel veniam.</p>
        </div>
    </div>
    <div id="tab4" class="tab-content__inner">
        <div class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum ducimus excepturi reprehenderit sunt.
                Ab fuga hic illo minima molestias repellat saepe? Asperiores, corporis ea eum fugit incidunt quas?
                Incidunt, maxime.</p>
        </div>
    </div>
</div>