Thursday, August 20, 2020

Belajar Javascript/Jquery Part 3 Menampilkan dan Menyembunyikan Eleman Halaman

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();
dan untuk menampilkan sebuah elemen menggunakan fungsi show() contohnya seperti ini:
$('p:first').show();
Yuk langsung saja kita praktek
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.

No comments:
Tulis komentar

Category