Assalamualaikum Wr,wb
Jquery dapat menampilkan dan menyembunyikan elemen-elemen halaman dengan mudah. menyembunyikan sebuah elemen halaman dengan fungsi hide(), yang digunakan dengan sebuah selektor seperti ini:
$('p:first').hide();$('p:first').show();Pesiapan
- Buka Text editor untuk menulis Halaman Web
- Buat File index.html
File index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Jquery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function sembunyikan(){
$('p:first').hide();
}
function tampilkan(){
$('p:first').show();
}
</script>
</head>
<body>
<center>
<h1>Menyembuyikan dan Menampilkan Elemen Paragraf</h1>
<div>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<p>Paragraf 4</p>
</div>
<form>
<input type="button" value="Sembuyikan" onclick="sembunyikan()">
<input type="button" value="Tampilkan" onclick="tampilkan()">
</form>
</center>
</body>
</html>
Simpan file kemudian buka project dibrowser klik tombol sembunyikan, akan terlihat paragraf pertama tidak tampil lagi, untuk menampilkan lagi tinggal klik tombol tampilkan. lebih jelasnya seperti gambar dibawah ini
gambar ketika paragraf tampil semua
gambar ketika paragraf disembunyikan
Mudahkan? oh iya javascript atau jquery biasanya digunakan untuk mempercantik tampilan website.
Tidak ada komentar:
Tulis komentar