Berikut adalah contoh Membuat Tabs dengan menggunakan jQuery
See the Pen Membuat Tabs menggunakan jQuery by WebbizID (@De-Orchids) on CodePen.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.ui-tabs .ui-tabs-panel {
display: none;
}
</style>
<script>
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>Isi dari Tab 1.</p>
</div>
<div id="tabs-2">
<p>Isi dari Tab 2.</p>
</div>
<div id="tabs-3">
<p>Isi dari Tab 3.</p>
</div>
</div>
</body>
</html>Penerapan kode di atas adalah dengan menyisipkan kode tersebut ke dalam file HTML. Ketika file HTML tersebut dijalankan, akan muncul tiga tab dengan judul “Tab 1”, “Tab 2”, dan “Tab 3”. Setiap tab memiliki konten yang berbeda. Ketika salah satu tab di klik, konten dari tab tersebut akan ditampilkan.
Anda dapat menyesuaikan kode di atas dengan menambahkan atau mengubah konten pada masing-masing tab sesuai kebutuhan Anda.
Baca juga:
Semoga contoh kode di atas dapat membantu Anda dalam membuat tabs menggunakan jQuery
Leave a Reply