Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tabs</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <script>

        // Make sure that clicking on the tab titles switches the content below. Here is example:
        // https://s3-eu-west-1.amazonaws.com/codecraft-production/uploads/e54d918d337a865a1e7ee4c3338c32d6/tabs.webm
        document.addEventListener('DOMContentLoaded', () => {
            let links = document.querySelectorAll('.nav>li>a'); // вземате като списък/масив всички а-та
            for (var i = 0; i < links.length; i++) {
                links[i].addEventListener('click', (e) => { // слагате поведение за клик
                    let anchor = e.target; // текущо кликнатия елемент
                    let url = anchor.href.split('#')[1]; // Ще раздели href като върне линка като масив от две части, първата до #, втората след #, съответно линка е примерно C://desktop/files/index.html#home ->
                    // ['C://desktop/files/index.html', 'home']
                    let active = document.querySelectorAll('.tab-pane.active')[0]; // намирате активния
                    active.classList.remove('active'); // махате класа актив
                    active = document.querySelector('.tab-pane#' + url); // намирате кликнатия
                    active.classList.add('active'); // слагате клас актив

                });
            }

        });
    </script>
    <style>
        .container { margin-top: 20px; }
        .tab-pane { border: solid 1px #eee; border-top: 0; padding: 20px;}
        .nav>li>a{margin:0 10px;}
    </style>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active">
                        <a href="#home">Home</a>
                    </li>
                    <li>
                        <a href="#profile">Profile</a>
                    </li>
                    <li>
                        <a href="#messages">Messages</a>
                    </li>

                    <li>
                        <a href="#settings">Settings</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">

                    <div class="tab-pane active" id="home">
                        <p>Content tab Home</p>
                    </div>

                    <div class="tab-pane" id="profile">
                        <p>Content tab Profile</p>
                    </div>

                    <div class="tab-pane" id="messages">
                        <p>Content tab Messages</p>
                    </div>

                    <div class="tab-pane" id="settings">
                        <p>Content tab Settings</p>
                    </div>

                </div>

            </div>
        </div>
    </div>
</body>
</html>