Articles → BOOTSTRAP → Tabs in bootstrap

Tabs in bootstrap






Example


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="nav-item active">
                <a href="#home" onclick="SelectTab(this, 'home')" class="nav-link active" data-bs-toggle="tab">Home</a>
            </li>
            <li class="nav-item">
                <a href="#profile" onclick="SelectTab(this, 'profile')" class="nav-link active" data-bs-toggle="tab">Profile</a>
            </li>
            <li class="nav-item">
                <a href="#messages" onclick="SelectTab(this, 'messages')" class="nav-link" data-bs-toggle="tab">Messages</a>
            </li>
        </ul>
        <div class="tab-content">
            <div  id="home">
                <p>Home tab content ...</p>
            </div>
            <div class="tab-pane fade" id="profile">
                <p>Profile tab content ...</p>
            </div>
            <div class="tab-pane fade" id="messages">
                <p>Messages tab content ...</p>
            </div>
        </div>
        <script>
            function SelectTab(obj, tabId) {

                var anchor = document.querySelector("ul li.active a");
                var id = anchor.getAttribute("href");

                document.querySelector("div .tab-content div" + id).classList.add("fade");
                document.querySelector("div .tab-content div" + id).classList.add("tab-pane");

                document.querySelector("ul li.active").classList.remove("active");
                obj.parentElement.classList.add("active");

                document.querySelector("div .tab-content div#" + tabId).classList.remove("fade");
                document.querySelector("div .tab-content div#" + tabId).classList.remove("tab-pane");
            }
        </script>


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



Output


Picture showing the output of tabs in bootstrap

Click to Enlarge

Picture showing the output of tabs in bootstrap

Click to Enlarge

Picture showing the output of tabs in bootstrap

Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Saturday, November 6, 2021

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250