Informasi yang panjang kadang memberikan kesan rumitnya sebuah informasi. Untuk memudahkan informasi dimengerti maka dibuat pengelompokan-pengelompokan informasi. Hal inilah yang dikerjakan oleh tab. Informasinya akan dikelompokkan dalam tab-tab sehingga informasi yang disajikan lebih mudah dipahami. Kali ini kita akan membuat tab menggunakan Bootstrap.
Source code untuk tab bagian navigasi adalah seperti contoh berikut ini:
<ul class=”nav nav-tabs”>
<li class=”active”><a href=”#akun” data-toggle=”tab”>Akun</a></li>
<li><a href=”#pendidikan” data-toggle=”tab”>Pendidikan</a></li>
<li><a href=”#keahlian” data-toggle=”tab”>Keahlian</a></li>
</ul>
Source code untuk bagian content adalah seperti contoh berikut ini:
<div class=”tab-content”>
<div class=”tab-pane active” id=”akun”>
Nama: Visia Gracia
<br/>Alamat: Serpong
</div>
<div class=”tab-pane” id=”pendidikan”>
KB Soli Deo
<br/>TK Soli Deo
<br/>SD Ora Et
</div>
<div class=”tab-pane” id=”keahlian”>
Menari
<br/>Menyanyi
<br/>Bermain Piano
</div>
</div>
<!–/tab-content–>
Source code lengkapnya adalah seperti berikut ini:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Tab</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<ul class=”nav nav-tabs”>
<li class=”active”><a href=”#akun” data-toggle=”tab”>Akun</a></li>
<li><a href=”#pendidikan” data-toggle=”tab”>Pendidikan</a></li>
<li><a href=”#keahlian” data-toggle=”tab”>Keahlian</a></li>
</ul>
<div class=”tab-content”>
<div class=”tab-pane active” id=”akun”>
Nama: Visia Gracia
<br/>Alamat: Serpong
</div>
<div class=”tab-pane” id=”pendidikan”>
KB Soli Deo
<br/>TK Soli Deo
<br/>SD Ora Et
</div>
<div class=”tab-pane” id=”keahlian”>
Menari
<br/>Menyanyi
<br/>Bermain Piano
</div>
</div>
<!–/tab-content–>
</div> <!– /container –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>
Demo dapat dilihat di http://aris.proweb.asia/dist/coba29.html dengan tampilan seperti berikut ini:
Informasi lebih lanjut silahkan mengunjungi http://getbootstrap.com/javascript/#tabs .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.
