Simple jQuery multiple tabs

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<ul class="tabs">
        <li class="tab-btn" data-tab="t1">Tab One</li>
        <li class="tab-btn" data-tab="t2">Tab Two</li>
        <li class="tab-btn" data-tab="t3">Tab Three</li>
        <li class="tab-btn" data-tab="t4">Tab Four</li>
        <li class="tab-btn" data-tab="t5">Tab Five</li>
    </ul>
    <div id="t1" class="tab-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A nostrum, rem nulla facere distinctio. Eius in est, velit laborum officia.
    </div>
    <div id="t2" class="tab-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum odio est, maxime laudantium quibusdam aut aliquam corrupti soluta sit. Eius, doloremque quo blanditiis assumenda nisi. Consectetur odit temporibus, rem in?
    </div>
    <div id="t3" class="tab-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, aperiam fugit, vero soluta voluptate qui repellat sed vitae sequi distinctio amet perspiciatis animi incidunt perferendis laudantium, a ea beatae id natus? Cupiditate optio dolorem voluptatibus consequuntur, odio minima! Modi eos, eius quod error! Magnam sed voluptas, laborum, eius odio veritatis.
    </div>
    <div id="t4" class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, quaerat. Laudantium totam delectus quos animi consequuntur aliquam, temporibus qui numquam explicabo ducimus sunt at pariatur commodi quibusdam! Voluptatum illo nisi nesciunt. Soluta, temporibus velit sed. Id sit enim hic dolorum sunt molestiae repudiandae veritatis dolore veniam culpa ex error obcaecati exercitationem accusamus sequi odit minus quos praesentium, inventore, asperiores perferendis tempora libero. Harum odit sunt quod, molestiae vitae fuga nisi.
    </div>
    <div id="t5" class="tab-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique delectus nostrum nemo et laboriosam! Recusandae illo culpa dignissimos accusamus architecto quo unde tempore incidunt similique sapiente magni itaque repudiandae vero eum soluta, sint natus, blanditiis, necessitatibus porro. Quibusdam minima explicabo ipsum. Itaque modi omnis doloremque velit ea quas placeat, deserunt, assumenda beatae. Corporis repellendus ullam, vitae dicta rerum pariatur tempora inventore consectetur veniam minima repudiandae aliquam dolor! Laborum veniam nobis praesentium ratione impedit culpa quisquam commodi qui nisi, laudantium magnam soluta omnis eius, fugit laboriosam ipsa consectetur libero, illum? Repellat!
    </div>
        <style>.tabs {
        margin: 0px;
        padding: 0px;
        list-style: none;
    }

.tabs li {
        color: #000;
        display: inline-block;
        padding: 10px 15px;
        cursor: pointer;
    }

.tabs li.current {
        background: #ddd;
        color: #000;
    }

.tab-content {
        display: none;
        background: #ddd;
        padding: 15px;
    }

.tab-content.current {
        display: block;
    }</style>
        <script>$(function() {
    $('.tabs li').click(function() {
        var tab_id = $(this).attr('data-tab');
        if ($("#" + tab_id).hasClass('current')) {
            $("#" + tab_id).removeClass('current');
            $(this).removeClass('current');
            return;
        }
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

$(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})</script>