Permanent Doctor 0942765115
Emergency Hotline 02773 878 115
banner
News

test

Monday, 03/02/2025, 13:24 GMT+7

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Ngang</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .menu {
            display: flex;
            justify-content: center;
            list-style: none;
            padding: 0;
            background-color: #333;
        }
        .menu li {
            padding: 15px 20px;
            cursor: pointer;
            color: white;
        }
        .menu li:hover {
            background-color: #555;
        }
        .image-container {
            margin-top: 20px;
        }
        .image-container img {
            max-width: 100%;
            height: auto;
            display: none;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li onclick="showImage('img1')">Hình 1</li>
        <li onclick="showImage('img2')">Hình 2</li>
        <li onclick="showImage('img3')">Hình 3</li>
    </ul>
   
    <div class="image-container">
        <img id="img1" src="https://via.placeholder.com/600x300/FF5733/FFFFFF?text=Hình+1" alt="Khoa 1">
        <img id="img2" src="https://via.placeholder.com/600x300/33FF57/FFFFFF?text=Hình+2" alt="Khoa 2">
        <img id="img3" src="https://via.placeholder.com/600x300/3357FF/FFFFFF?text=Hình+3" alt="Khoa 3">
    </div>
 
    <script>
        function showImage(id) {
            const images = document.querySelectorAll('.image-container img');
            images.forEach(img => img.style.display = 'none');
            document.getElementById(id).style.display = 'block';
        }
    </script>
</body>
</html>

TAG:

    Other news :