javascript - How to Open a Links in a div tag in same page? -
<a href="webform1.aspx">form1</a> <a href="webform2.aspx">form2</a> <a href="webform3.aspx">form3</a> <div id="content"> </div> `` here have 3 links in page. if click link go assigned page .now want load link div tag. there answers available not working.
i have tried doing (a clarification comments):
$(document).ready(function () { $('a').on("click", function () { e.preventdefault(); $("#content").load(this.getattribute('href')); });
when using jquery must link jquery library or download copy , link it.
example: link jquery library
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> once have done can start using jquery.
jquery has dom ready function, it's recommended place of jquery within prevent error upon page load. ensure jquery run when page had loaded content "page/dom ready".
example: dom ready function.
$(document).ready(function(){ //script/function go here... }); putting these attempt should work after replacing e event or if pass event function.
example: passing
evente
$('a').on("click", function(e){ e.preventdefault(); $("#content").load(this.getattribute('href')); }); example: without passing
event
$('a').on("click", function(){ event.preventdefault(); $("#content").load(this.getattribute('href')); }); your overall script should this:
$(document).ready(function(){ $('a').on("click", function(){ event.preventdefault(); $("#content").load(this.getattribute('href')); }); }); working demo > jsfiddle
$(document).ready(function(){ $('a').on("click", function(){ event.preventdefault(); //this run fine files stored within own domain //$("#content").load(this.getattribute('href')); // load external pages. $("#content").html('<object data="'+this.getattribute('href')+'" />'); }); });#content{height:250;width:500px;} #content object{height:100%;width:100%;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">jquery 3.1.1</a> <a href="https://api.jquery.com/ready/">jquery dom read</a> <a href="https://jsfiddle.net/2nkek4hb/1/">form3</a> <div id="content"></div>i prefer keep javascript/jquery between <head> tags butit's entirely you.
snipped update:
if apply css height:100%; , width:100%; object should fit size of #content have edited snippet changes shown below.
css:
#content{height:250;width:500px;} #content object{height:100%;width:100%;} if have question source code above please leave comment below , possible.
i hope helps. happy coding!
Comments
Post a Comment