Vanilla JavaScript Tabs

Prepare HTML

    <link rel="stylesheet" href="./dist/asset/style.css">

    <div class="tabs">
        <ul class="tabs-links">
            <li><a href="#tab-1">tab-1</a></li>
            <li><a href="#tab-2">tab-2</a></li>
            <li><a href="#tab-3">tab-3</a></li>
        </ul>
        <div class="tabs-content">
            <div id="tab-1">First tab content...</div>
            <div id="tab-2">Second tab content...</div>
            <div id="tab-3">Third tab content...</div>
        </div>
    </div>

    <script src="./dist/assets/script.js"></script>

Options

Option	Type	Default	Description
links	string		HTML links of the tabs in the HTML markup.
open	number	0	Opens this tab initially.

Usage example

    const tabs = new SimpleTabs({
        links : '.tabs-links a', // Html selector
        open : 3 // default opned tab
    })

License

Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

See Unlicense for full details.