HTML, CSS, மற்றும் JavaScript கொண்டு ஒரு டாப் கலரி (Tab Gallery) உருவாக்குவது எப்படி
டாப் கலரி (Tab Gallery) என்பது ஒவ்வொரு பிரிவுக்கும் தனித்தனி உள்ளடக்கம் கொண்ட பிரிவுகளை காட்சிப்படுத்த அனுமதிக்கும் ஒரு பயனுள்ள கூறாகும். இந்த பதிவில், HTML, CSS, மற்றும் JavaScript பயன்படுத்தி எளிமையான டாப் கலரி ஒன்றை உருவாக்குவது எப்படி என்பதை காண்போம்.
கட்டமைப்பு (HTML)
முதலில், HTML-ஐ பயன்படுத்தி டாப் கலரியின் அடிப்படை அமைப்பை உருவாக்குவோம்.
<!DOCTYPE html>
<html lang="ta">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>டாப் கலரி</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>டாப் கலரி</h2>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Tab1')">தொகு 1</button>
<button class="tablinks" onclick="openTab(event, 'Tab2')">தொகு 2</button>
<button class="tablinks" onclick="openTab(event, 'Tab3')">தொகு 3</button>
</div>
<div id="Tab1" class="tabcontent">
<h3>தொகு 1</h3>
<p>இங்கு தொகு 1 உள்கட்டுரைகள் வரும்.</p>
</div>
<div id="Tab2" class="tabcontent">
<h3>தொகு 2</h3>
<p>இங்கு தொகு 2 உள்கட்டுரைகள் வரும்.</p>
</div>
<div id="Tab3" class="tabcontent">
<h3>தொகு 3</h3>
<p>இங்கு தொகு 3 உள்கட்டுரைகள் வரும்.</p>
</div>
<script src="script.js"></script>
</body>
</html>வடிவமைப்பு (CSS)
CSS கொண்டு டாப் கலரியை அழகாக வடிவமைப்போம். இதன் மூலம் பயன்படுத்துபவருக்கு அனுகமாக இருக்கும்.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 16px;
border-top: none;
}செயல்பாடு (JavaScript)
JavaScript பயன்படுத்தி டாப் கலரியின் செயல்பாட்டை நம்மால் உருவாக்க முடியும்.
function openTab(evt, tabName) {
let i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}முடிவு
இந்தக் கட்டுரையில், HTML, CSS, மற்றும் JavaScript பயன்படுத்தி எளிய டாப் கலரியை எப்படி உருவாக்குவது என்பதை நாங்கள் பார்த்தோம். இந்த டாப் கலரியை உங்கள் இணையதளத்தில் சேர்ப்பதன் மூலம், பயனாளர்கள் வேறு தலைப்புகளில் உள்ள தகவல்களை எளிதாக அணுக முடியும். இந்த கூறு உங்கள் இணையதளத்தின் பயன்பாடையும் காட்சியையும் மேம்படுத்தும்.
