Membuat Keseluruhan DIV Bisa Diklik Menggunakan Jquery

27/09/2019    Shelli Ripati    250     Website

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More