In this post you can find the solution of How to make whole Div tag clickable by using jQuery. There are many ways we can make Div tag clickable like by using CSS, HTML or javascript. But here we will seen how can use simple jQuery code to create whole Div clickable. In web development there are many places in which we have to put link on whole div tag not only single text. Then at that time we have put simple javascript in onclick attribute of div tag and make whole div tag clickable. Or by using CSS we have convert simple div tag to clickable div tag.
But by this method it has affect SEO score of our web page, because in html code we have add more attribute. But if we have use simple jQuery for this things then in single line of code it will convert div tag to clickable div tag without adding any extra tag in our html code. This source you can also implement other tag like span tag, html 5 article tag or any other tag which we can use in place of Div. So, by this code we not only convert Div tag to clickable tag, but also we can aslo use same code for convert other tag to clickable tag. Below you can find source code and online demo of How to make whole Div clickable by using jQuery.
See Also
Source Code
<!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>How to make Whole Div Clickable using 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">How to make Whole Div Clickable using jquery</h3>
<br />
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 clickable">
<img src="image.jpg" class="img-thumbnail" />
<h3>Exporting Data into Multiple Excel sheets in PHP</h3>
<p>If you are working with large amount of data and mainly we have use Excel and CSV file format for export data in web development. So, in this post we have describe how to split huge amount of mysql datable data and export into multiple excel or csv file by using PHPExcel library in PHP.</p>
<a href="https://www.webslesson.info/2018/12/exporting-data-into-multiple-excel-sheets-in-php.html">Read more</a>
</div>
<div class="col-md-4"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('.clickable').click(function(){
window.location = $(this).find("a").attr("href");
});
});
</script>
0 comments:
Post a Comment