admin管理员组

文章数量:1335092

I'm a beginner in html and javascript. I created a link in #top_Bar. when I click on the link I want the page to load on the #All_songlist. but all I see in #All_songlist is just this two words "music.html" not the content of "music.html". where did I go wrong? I am a bit confused about what does the innerHTML do. I want to do it without useing < iframe > tag.

<div id="top_Bar">
     <a href=" file:///F:/music.html"  onclick="load_songlist()"> SONG LIST </a> 
</div>

<div id="All_songlist"> </div>

code on the javascript is:

 function load_songlist(){
          document.getElementById("All_songlist").innerHTML="music.html";
 }

I'm a beginner in html and javascript. I created a link in #top_Bar. when I click on the link I want the page to load on the #All_songlist. but all I see in #All_songlist is just this two words "music.html" not the content of "music.html". where did I go wrong? I am a bit confused about what does the innerHTML do. I want to do it without useing < iframe > tag.

<div id="top_Bar">
     <a href=" file:///F:/music.html"  onclick="load_songlist()"> SONG LIST </a> 
</div>

<div id="All_songlist"> </div>

code on the javascript is:

 function load_songlist(){
          document.getElementById("All_songlist").innerHTML="music.html";
 }
  • javascript
  • html
Share Improve this question edited Jul 2, 2013 at 22:06 Giliweed asked Jul 2, 2013 at 21:50 GiliweedGiliweed 5,1778 gold badges30 silver badges35 bronze badges 8
  • 1 innerHTML literally writes that to the output so onclick you would have <div id="All_songlist">music.html</div> – redditor Commented Jul 2, 2013 at 21:54
  • You'll need to perform an AJAX request to load the contents of music.html and then insert that. Do a little research into AJAX. – Jivings Commented Jul 2, 2013 at 21:55
  • putting the html file inside the div tag is not working @redditor – Giliweed Commented Jul 2, 2013 at 22:03
  • I edited the link. the page opens fine on another tab. but this is not the problem. I want the page to open on the #all_songlist div tag. – Giliweed Commented Jul 2, 2013 at 22:09
  • @Giliweed haha I wasn't providing a solution, merely menting on what innerHTML is. Check out Matthew D Auld's answer - its the best way, you should mark is correct. If you still don't understand it, there are many examples on google. – redditor Commented Jul 2, 2013 at 22:26
 |  Show 3 more ments

4 Answers 4

Reset to default 5

This would be easy using the jQuery library. Use jQuery’s load() function:

function load_songlist(){
    $('#All_songlist').load('music.html');
}

To add the jQuery library to your current page, add the code below to your <head>:

<script src="http://code.jquery./jquery-1.9.1.js"></script>

As Matthew D Auld answered, you should use jQuery's load() function.

As you have had trouble understanding this in practice I have prepared a JSfiddle for you, click here.

To use jQuery, you simply need to include a link in your <head> section. Then you have a script which says:

  • $(window).load(function(){ Do this function when the page loads.
  • $("#SongListLink").click(function() { When the user clicks on something with the ID SongListLink, do this function.
  • $('#All_songlist') .load('music.html'); Populate the DIV with the ID All_songlist with the content from music.html

You finished code should look something like this:

<head>
<script type='text/javascript' src='//code.jquery./jquery-1.10.1.js'></script>
<script type='text/javascript'>
$(window).load(function(){
$(function() {
    $("#SongListLink").click(function() {
        $('#All_songlist')
           .load('music.html');
    });
});
});
</script>
</head>

<body>

<div id="top_Bar">
     <a href="#" id="SongListLink">SONG LIST</a> 
</div>

<div id="All_songlist"></div>

</body>

you can try something like this

url = "music.html"
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4){
 document.getElementById("All_songlist").innerHTML= xhr.responseText
}
}
xhr.send();

Try an ajax request:

function doAjax()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {//IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {//IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
   xmlhttp.onreadystatechange=function()
   {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
          document.getElementById("All_songlist").innerHTML=xmlhttp.responseText;
      }
  }
  xmlhttp.open("GET","music.html",true);
  xmlhttp.send();
}

Markup:

<div id="top_Bar">
     <a href="music.html"  onclick="doAjax()"> SONG LIST </a> 
</div>

<div id="All_songlist"> </div>

本文标签： javascripthow to open a page on a div tag from another div tagStack Overflow

版权声明：本文标题：javascript - how to open a page on a div tag from another div tag? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742384239a2464703.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。