CODEWITHSUNDEEP
javascriptjqueryhtml
User12345
User12345

Reputation: 325

Load a html or div's content into a div

I have a set of "li". On clicking each of those "li", I'd like to load a "div" with contents from a html page. I've read some answers on stackoverflow & tried them but they aren't helping me get this working.

Here's the code am trying now

<!doctype html>
<html lang=''>
   <head>
      <meta charset='utf-8'>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="styles.css">
      <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      <script type="text/javascript">
      $(document).ready(function(){
         $("#page1").click(function(){
            $('#result').load('dst.html');
           //alert("Thanks for visiting!");
         }); 

         $("#page2").click(function(){
            $('#result').load('incf.html');
           //alert("Thanks for visiting!");
         });
       });
   </script>
   </head>
   <body>
      <header class="site-header-wrap">
         <div class="site-header">
            <h1>MY TOOL</h1>
         </div>
      </header>
      <div id='cssmenu'>
         <ul>
            <li class='active'><a href='#'><span>HOME</span></a></li>
            <li><a id="page1" href="#"><span>OPTION 1</span></a></li>
            <li><a id="page2" href="#"><span>OPTION 2</span></a></li>
            <li><a id="page3" href="#"><span>OPTION 3</span></a></li>  
         </ul>
      </div>
      <div id="result"></div>
   </body>
<html>

The code in dst.html is 

<html lang=''>
   <body>
      <p> In page 1(dst page) </p>
   </body>
<html>

Could I request help please spot what I'm doing wrong here?

Upvotes: 0

Views: 279

Answers (1)

NooBskie
NooBskie

Reputation: 3841

Your code seems to be working for the most part for me the only thing i changed in your code is $('#dblock').load('dst.html'); to $('#result').load('dst.html'); since there is no div with the id #dblock

also make sure your file structure is setup properly and the html files are there with what you have setup now you should have three html files in the same folder

Upvotes: 1

Related Questions