Jobs Tabs. – codezillaye

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jobs Tabs</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="tabs-container">
        <!-- Tab Navigation -->
        <div class="tab-navigation">
            <button class="tab-link active" data-tab="job1">Job 1</button>
            <button class="tab-link" data-tab="job2">Job 2</button>
            <button class="tab-link" data-tab="job3">Job 3</button>
            <!-- Add more buttons for additional jobs -->
        </div>

        <!-- Tab Content -->
        <div class="tab-content active" id="job1">
            <h2>Job 1: Web Developer</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta arcu.</p>
            <p>Requirements:</p>
            <ul>
                <li>Experience with HTML, CSS, JavaScript</li>
                <li>Familiarity with responsive design</li>
                <li>Team player and problem solver</li>
            </ul>
        </div>
        
        <div class="tab-content" id="job2">
            <h2>Job 2: UX/UI Designer</h2>
            <p>Integer tincidunt felis quis tortor pretium, a suscipit ex suscipit.</p>
            <p>Requirements:</p>
            <ul>
                <li>Proficiency in Adobe XD, Figma</li>
                <li>Strong portfolio of UI/UX projects</li>
                <li>Ability to collaborate with cross-functional teams</li>
            </ul>
        </div>
        
        <div class="tab-content" id="job3">
            <h2>Job 3: Digital Marketing Specialist</h2>
            <p>Etiam vel leo quis risus placerat pretium nec at nisl.</p>
            <p>Requirements:</p>
            <ul>
                <li>Proven experience in digital marketing campaigns</li>
                <li>Knowledge of SEO and SEM</li>
                <li>Excellent analytical skills</li>
            </ul>
        </div>
        
        <!-- Add more tab-content divs for additional jobs -->
    </div>
    
    <script>
        // JavaScript for tab functionality
        const tabLinks = document.querySelectorAll('.tab-link');
        const tabContents = document.querySelectorAll('.tab-content');

        tabLinks.forEach(link => {
            link.addEventListener('click', () => {
                // Hide all tab contents
                tabContents.forEach(content => {
                    content.classList.remove('active');
                });

                // Deactivate all tab links
                tabLinks.forEach(tab => {
                    tab.classList.remove('active');
                });

                // Activate the clicked tab
                const tabId = link.getAttribute('data-tab');
                const tabToShow = document.getElementById(tabId);
                tabToShow.classList.add('active');
                link.classList.add('active');
            });
        });
    </script>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f1f1f1;
  padding: 20px;
}

.tabs-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.tab-navigation {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.tab-link {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.tab-link.active {
  background-color: #0056b3;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  margin-top: 10px;
}

.tab-content h2 {
  color: #333;
}

.tab-content p {
  color: #666;
  margin-bottom: 10px;
}

.tab-content ul {
  color: #666;
  margin-left: 20px;
}