Membuat Keseluruhan DIV Bisa Diklik Menggunakan Jquery

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan Membuat Keseluruhan DIV Bisa Diklik Menggunakan Jquery. Dimana div akan dapat diklik meskipun tidak di bungkus dengan tag <a> di dalam html. Langkah pertama untuk dapat Membuat Keseluruhan DIV Bisa Diklik Menggunakan Jquery, teman-teman buat struktur html seperti di bawah 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">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Membuat Keseluruhan DIV Bisa Diklik Menggunakan Jquery</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <style>
 .clickable{
  border:1px solid #ccc;
  cursor:pointer;
  padding-top:12px;
  padding-bottom:12px;
 }
 </style>
</head>
<body>
 <div class="container">
  <br />
  <h3 align="center">Membuat Keseluruhan DIV Bisa Diklik Menggunakan Jquery</h3>
  <br />
  <div class="row">
   <div class="col-md-4"></div>
   <div class="col-md-4 clickable">
    <img src="https://www.dumetschool.com/dumet-school.jpg" class="img-thumbnail" />
    <h3>Membuat Keseluruhan DIV Bisa Diklik Menggunakan Jquery</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa mollitia illum voluptatibus cupiditate saepe, architecto doloremque sapiente sint labore. Deserunt esse corrupti mollitia possimus veritatis atque molestiae optio sint pariatur!</p>
    <a href="https://www.dumetschool.com/">Read more</a>
   </div>
   <div class="col-md-4"></div>
  </div>
 </div>
</body>
</html>

Jika sudah maka tahap selanjutnya teman-teman buat script jquery untuk membuat div secara keseluruhan dapat di klik seperti di bawah ini.

<script>
$(document).ready(function(){
 $('.clickable').click(function(){
  window.location = $(this).find("a").attr("href");
 });
 
});
</script>

Untuk script di atas saya membuat satu event klik yang didalamnya terdapat  window.location untuk melakukan direct ke suatu halaman, yang mana urlnya didapat dari tag a yang berada di dalam sebuah div. Dan untuk mendapatkan tag a beserta isi href dari tag a maka saya menggunakan metode find untuk menemukan tag a yang berada didalam div dan mengambil href menggunakan metode attr(). Maka jika kita melakukan klik pada area yang masih termasuk area div akan langsung di direct ke halaman berdasarkan url yang didapatkannya.

Demikian artikel tentang cara Membuat Keseluruhan DIV Bisa Diklik Menggunakan Jquery. Semoga dapat bermanfaat dan selamat mencoba ya.

27 September 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat