rushiedev/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabs Demo</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;

            /* Background */
            background-color: #000;

            /* Font */
            font-family: 'Inter', sans-serif;
            color: #fff;
        }

        .card {
            width: 300px;
            background-color: #121212;
            padding: 10px 15px;
            border-radius: 4px;
        }

        .tab-list a {
            color: #fff;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="card">
            <div class="tab-list">
                <a href="#home" class="tab-link">Home</a>
                <a href="#projects" class="tab-link">Projects</a>
                <a href="#shiggy" class="tab-link">Shiggy</a>
            </div>

            <!-- Tab mặc định sẽ thêm class .active -->
            <div class="tab-content active" id="home">
                home tab
            </div>

            <div class="tab-content" id="projects">
                projects tab
            </div>

            <div class="tab-content" id="shiggy">
                shiggy tab
            </div>
        </div>
    </div>

    <script>
        // Get toàn bộ class .tab-link
        const tab_links = document.getElementsByClassName('tab-link');

        // Get toàn bộ class .tab-contents
        const tab_contents = document.getElementsByClassName('tab-content');

        // Sử dụng vòng lặp để xử lý toàn bộ đống tab-link
        for (var i = 0; i < tab_links.length; i++) {
            // Thêm event click vào
            tab_links[i].addEventListener('click', function (e) {
                // Hủy event (chuyển trang) khi click
                e.preventDefault();

                // Lấy attribute href
                var href = this.getAttribute('href');

                // Get cái tab content
                var content = document.querySelector(`.tab-content${href}`);

                // Sử dụng vòng lặp xóa các class active đang hiện hữu

                for (var i = 0; i < tab_contents.length; i++) {
                    tab_contents[i].classList.remove('active');
                }

                // Thêm class .active
                content.classList.add('active');
            })
        }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Tabs Demo</title>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	#app {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;

	/* Background */
	background-color: #000;

	/* Font */
	font-family: 'Inter', sans-serif;
	color: #fff;
	}

	.card {
	width: 300px;
	background-color: #121212;
	padding: 10px 15px;
	border-radius: 4px;
	}

	.tab-list a {
	color: #fff;
	}

	.tab-content {
	display: none;
	}

	.tab-content.active {
	display: block;
	}
	</style>
	</head>

	<body>
	<div id="app">
	<div class="card">
	<div class="tab-list">
	<a href="#home" class="tab-link">Home</a>
	<a href="#projects" class="tab-link">Projects</a>
	<a href="#shiggy" class="tab-link">Shiggy</a>
	</div>

	<!-- Tab mặc định sẽ thêm class .active -->
	<div class="tab-content active" id="home">
	home tab
	</div>

	<div class="tab-content" id="projects">
	projects tab
	</div>

	<div class="tab-content" id="shiggy">
	shiggy tab
	</div>
	</div>
	</div>

	<script>
	// Get toàn bộ class .tab-link
	const tab_links = document.getElementsByClassName('tab-link');

	// Get toàn bộ class .tab-contents
	const tab_contents = document.getElementsByClassName('tab-content');

	// Sử dụng vòng lặp để xử lý toàn bộ đống tab-link
	for (var i = 0; i < tab_links.length; i++) {
	// Thêm event click vào
	tab_links[i].addEventListener('click', function (e) {
	// Hủy event (chuyển trang) khi click
	e.preventDefault();

	// Lấy attribute href
	var href = this.getAttribute('href');

	// Get cái tab content
	var content = document.querySelector(`.tab-content${href}`);

	// Sử dụng vòng lặp xóa các class active đang hiện hữu

	for (var i = 0; i < tab_contents.length; i++) {
	tab_contents[i].classList.remove('active');
	}

	// Thêm class .active
	content.classList.add('active');
	})
	}
	</script>
	</body>

	</html>