Почему мой content_item div не загружает страницу html через jQuery?

Question

Я пытаюсь переписать шаблон веб-сайта, который мой друг хочет для своей новой веб-страницы.

Он использует совершенно новые страницы для каждого пункта меню, который, на мой взгляд, довольно уродлив, поэтому я хотел, чтобы каждая кнопка меню загружала новую прозрачную html-страницу внутри сборки div для контента, но по какой-то причине она показывает без содержимого и не загружает html i, подключенный к домашней кнопке.

html 
 
{ height: 100%;} 
 

 
* 
 
{ margin: 0; 
 
    padding: 0;} 
 

 
body 
 
{ font: normal 85% Arial, Helvetica, sans-serif; 
 
    background: #00BFFF url(../images/background.jpg) repeat; 
 
    color: #000; 
 
} 
 

 
p 
 
{ padding: 0 0 10px 0; 
 
    color: #FFF; 
 
    line-height: 1.7em; 
 
    font-size: 100% } 
 

 
img 
 
{ border: 0;} 
 

 
h1, h2, h3, h4, h5, h6 
 
{ font: normal 175% Arial, Helvetica, sans-serif; 
 
    color: #FFF; 
 
    text-shadow: 1px 1px #1D1D1D; 
 
    letter-spacing: -1px; 
 
    margin: 0 0 10px 0;} 
 

 
h2 
 
{ font: normal 165% Arial, Helvetica, sans-serif;} 
 

 
h3 
 
{ font: normal 130% Arial, Helvetica, sans-serif; 
 
} 
 

 
h4, h5, h6 
 
{ margin: 0; 
 
    padding: 0 0 0px 0; 
 
    font: normal 150% Arial, Helvetica, sans-serif; 
 
    line-height: 1.5em;} 
 

 
h5, h6 
 
{ font: normal 95% Arial, Helvetica, sans-serif; 
 
    color: #888; 
 
    padding-bottom: 15px;} 
 

 
a 
 
{ color: #FFF; 
 
    font-weight: bold; 
 
    background: transparent; 
 
    outline: none; 
 
    text-decoration: underline;} 
 

 
a:hover 
 
{ text-decoration: none;} 
 

 
ul 
 
{ margin: 2px 0 22px 30px; 
 
    line-height: 1.7em; 
 
    font-style: normal; 
 
    font-size: 100%;} 
 

 
ol 
 
{ margin: 8px 0 22px 20px;} 
 

 
ol li 
 
{ margin: 0 0 11px 0;} 
 

 
#main, #header, #banner, #menubar, #site_content, #footer, #content_bottom 
 
{ margin-left: auto; 
 
    margin-right: auto;} 
 

 
#main 
 
{ background: transparent;} 
 
    
 
#header 
 
{ width: 960px; 
 
    height: 120px; 
 
    background: transparent;} 
 

 
#banner 
 
{ width: 960px; 
 
    position: relative; 
 
    height: 50px; 
 
    padding: 15px 0 0 0; 
 
    background: transparent;} 
 

 
#menubar 
 
{ width: 960px; 
 
    height: 50px; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    background: #0043A8; 
 
    background: -moz-linear-gradient(#43A9FF, #0043A8); 
 
    background: -o-linear-gradient(#43A9FF, #0043A8); 
 
    background: -webkit-linear-gradient(#43A9FF, #0043A8); 
 
    border-radius: 15px 15px 0px 0px; 
 
    -moz-border-radius: 15px 15px 0px 0px; 
 
    -webkit-border: 15px 15px 0px 0px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    } 
 
    
 
#welcome 
 
{ width: 960px; 
 
    float: left; 
 
    height: 50px; 
 
    margin: 0 auto; 
 
    padding-left: 20px; 
 
    background: transparent;} 
 
    
 
#welcome_slogan 
 
{ width: 960px; 
 
    float: left; 
 
    height: 50px; 
 
    margin: 0 auto; 
 
    padding-left: 20px; 
 
    background: transparent;} 
 
    
 
#welcome H1 
 
{ font: normal 300% Arial, Helvetica, sans-serif; 
 
    letter-spacing: -3px; 
 
    color: #FFF; 
 
    text-shadow: 1px 1px #1D1D1D;} 
 

 
#welcome_slogan H1 
 
{ font: normal 200% Arial, Helvetica, sans-serif; 
 
    letter-spacing: -2px; 
 
    color: #FFF; 
 
    text-shadow: 1px 1px #1D1D1D;} 
 
    
 
ul#menu 
 
{ margin:0; 
 
    margin: 0 0 0 20px;} 
 

 
ul#menu li 
 
{ padding: 0 0 0 0px; 
 
    list-style: none; 
 
    margin: 2px 0 0 0; 
 
    display: inline; 
 
    background: transparent;} 
 

 
ul#menu li a 
 
{ float: left; 
 
    font: bold 120% Arial, Helvetica, sans-serif; 
 
    text-align: center; 
 
    color: #FFF; 
 
    text-decoration: none; 
 
    height: 24px; 
 
    text-shadow: 0px -1px 0px #000; 
 
    padding: 16px 20px 10px 20px; 
 
    background: transparent; } 
 
    
 
ul#menu li.current a 
 
{ color: #FFF; 
 
    background: #323232; 
 
    text-shadow: none;} 
 
    
 
ul#menu li:hover a 
 
{ color: #FFF; 
 
    background: #323232; 
 
    text-shadow: none;} 
 

 
#site_content 
 
{ width: 940px; 
 
    padding-left: 20px; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    background: #323232; 
 
    border-radius: 0px 0px 15px 15px; 
 
    -moz-border-radius: 0px 0px 15px 15px; 
 
    -webkit-border: 0px 0px 15px 15px;} 
 

 
.sidebar_container 
 
{ float: left; 
 
    margin: 10px 20px 0 0; 
 
    width: 215px; 
 
    padding: 0;} 
 

 
.sidebar 
 
{ float: left; 
 
    width: 250px; 
 
    padding: 0; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px;} 
 

 
.sidebar_item 
 
{ font: normal 100% Arial, Helvetica, sans-serif; 
 
    width: 215px;} 
 

 
.sidebar h2 
 
{ padding: 5px 0 0 10px; 
 
    font: normal 140% Arial, Helvetica, sans-serif; 
 
    height: 30px; 
 
    text-shadow: 0px -1px 0px #000; 
 
    color: #fff; 
 
    background: #0043A8; 
 
    background: -moz-linear-gradient(#43A9FF, #0043A8); 
 
    background: -o-linear-gradient(#43A9FF, #0043A8); 
 
    background: -webkit-linear-gradient(#43A9FF, #0043A8); 
 
    border-radius: 15px 15px 15px 15px; 
 
    -moz-border-radius: 15px 15px 15px 15px; 
 
    -webkit-border: 15px 15px 15px 15px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;} 
 

 
#content 
 
{ width: 680px; 
 
    margin-bottom: 20px; 
 
    float: left;} 
 

 
.content_item 
 
{ width: 680px; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px;} 
 
    
 
.content_image 
 
{ float: left; 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: 0 20px 10px 0; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;} 
 
    
 
.content_container 
 
{ width: 320px; 
 
    padding: 5px; 
 
    margin-right: 10px; 
 
    float: left;} 
 
    
 
#content_bottom 
 
{ width: 960px; 
 
    height: 160px; 
 
    text-align: center;} 
 
    
 
#content_bottom p 
 
{ color: #000; 
 
    text-shadow: 1px 1px #FFF; } 
 

 
#content_bottom h4 
 
{ color: #000; 
 
    text-shadow: none;} 
 
    
 
.content_bottom_container_box 
 
{ width: 295px; 
 
    padding: 5px; 
 
    text-align: center; 
 
    margin: 20px 0 10px 10px; 
 
    float: left;} 
 

 
.content_bottom_container_boxl 
 
{ width: 295px; 
 
    padding: 5px; 
 
    text-align: center; 
 
    margin: 20px 0 10px 10px; 
 
    float: left;} 
 
    
 
#footer 
 
{ width: 960px; 
 
    height: 20px; 
 
    padding-top: 20px; 
 
    text-align: center; 
 
    background: transparent; 
 
    color: #1D1D1D; 
 
    text-shadow: 1px 1px #FFF;} 
 

 
#footer a, #footer a:hover 
 
{ color: #1D1D1D; 
 
    text-decoration: none; 
 
    padding-bottom: 20px;} 
 

 
#footer a:hover 
 
{ text-decoration: underline;} 
 
    
 
.readmore 
 
{ font: bold 110% Arial, Helvetica, sans-serif; 
 
    height: 15px; 
 
    margin-left: 95px; 
 
    width: 90px; 
 
    padding: 5px 5px 10px 7px; 
 
    background: #fff; 
 
    background: -moz-linear-gradient(#fff, #ccc); 
 
    background: -o-linear-gradient(#fff, #ccc); 
 
    background: -webkit-linear-gradient(#fff, #ccc); 
 
    border-radius: 15px 15px 15px 15px; 
 
    -moz-border-radius: 15px 15px 15px 15px; 
 
    -webkit-border: 15px 15px 15px 15px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;} 
 
    
 
.readmore a 
 
{ color: #1D1D1D;} 
 
    
 
.button_small 
 
{ font: normal 110% Arial, Helvetica, sans-serif; 
 
    height: 15px; 
 
    width: 90px; 
 
    padding: 5px 5px 10px 7px; 
 
    background: #0043A8; 
 
    background: -moz-linear-gradient(#43A9FF, #0043A8); 
 
    background: -o-linear-gradient(#43A9FF, #0043A8); 
 
    background: -webkit-linear-gradient(#43A9FF, #0043A8); 
 
    border-radius: 15px 15px 15px 15px; 
 
    -moz-border-radius: 15px 15px 15px 15px; 
 
    -webkit-border: 15px 15px 15px 15px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;} 
 
    
 
.button_small a 
 
{ color: #FFF; 
 
    padding-left: 5px;} 
 

 
.form_settings 
 
{ margin: 15px 0 0 0;} 
 

 
.form_settings p 
 
{ padding: 0 0 4px 0;} 
 

 
.form_settings span 
 
{ float: left; 
 
    width: 280px; 
 
    text-align: left;} 
 
    
 
.form_settings input, .form_settings textarea 
 
{ padding: 2px; 
 
    width: 299px; 
 
    font: 100% arial; 
 
    border: 1px solid #E5E5DB; 
 
    background: #FFF; 
 
    color: #47433F;} 
 
    
 
.form_settings input[type="checkbox"] 
 
{ padding: 2px 0; 
 
    width: 15px; 
 
    font: 100% arial; 
 
    border: 0; 
 
    background: #FFF; 
 
    color: #47433F; 
 
    margin: 28px 0;} 
 

 
.form_settings .submit 
 
{ font: 100% arial; 
 
    width: 99px; 
 
    margin: 0 0 0 206px; 
 
    height: 26px; 
 
    padding: 2px 0 3px 0; 
 
    cursor: pointer; 
 
    background: #0043A8; 
 
    background: -moz-linear-gradient(#43A9FF, #0043A8); 
 
    background: -o-linear-gradient(#43A9FF, #0043A8); 
 
    background: -webkit-linear-gradient(#43A9FF, #0043A8); 
 
    border-radius: 7px 7px 7px 7px; 
 
    -moz-border-radius: 7px 7px 7px 7px; 
 
    -webkit-border: 7px 7px 7px 7px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
 
    color: #FFF;} 
 

 
.slideshow { 
 
    width: 680px; 
 
    height: 250px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    margin-top: 20px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;} 
 
    
 
/* styling for the slideshow on the homepage */ 
 
ul.slideshow { 
 
    list-style: none; 
 
    width: 680px; 
 
    height: 250px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    margin: 0; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;} 
 
    
 
ul.slideshow li { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    left: 0; 
 
    right: 0;} 
 
    
 
ul.slideshow li.show { 
 
    z-index: 500;} 
 
    
 
ul img { 
 
    border: none;} 
 
    
 
#slideshow-caption { 
 
    width: 680px; 
 
    height: 38px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 500;} 
 
    
 
#slideshow-caption .slideshow-caption-container { 
 
    padding: 10px 25px 10px 25px; 
 
    background: transparent url(../images/transparent.png) repeat; 
 
    z-index: 1000;} 
 
    
 
#slideshow-caption p { 
 
    padding: 0; 
 
    font: normal 130% arial, sans-serif; 
 
    color: #FFF;} 
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
 

 
<head> 
 
    <title>ARaynorDesign Template</title> 
 
    <meta name="description" content="free website template" /> 
 
    <meta name="keywords" content="enter your keywords here" /> 
 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=9" /> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
 
    <script type="text/javascript" src="js/image_slide.js"></script> 
 
</head> 
 

 
<body> 
 
<script> 
 
    $(function() { // shorthand for `$(document).ready(function() { 
 
     $("#content_item").load("main.html"); 
 
    }); 
 
</script> 
 
    <div id="main"> 
 
    <div id="header"> 
 
\t <div id="banner"> 
 
\t  <div id="welcome"> 
 
\t  <h1>Blue Skies</h1> 
 
\t  </div><!--close welcome--> 
 
\t  <div id="welcome_slogan"> 
 
\t  <h1>Your Company Slogan Here</h1> 
 
\t  </div><!--close welcome_slogan--> 
 
\t </div><!--close banner--> 
 
    </div><!--close header--> 
 

 
\t <div id="menubar"> 
 
     <ul id="menu"> 
 
     <li class="current"><a href="#" onclick='$("#content_item").load("main.html");'>Home</a></li> 
 
     <li><a href="#" onclick='$("#content_item").load("ourwork.html");'>Our Work</a></li> 
 
     <li><a href="#" onclick='$("#content_item").load("testimonials.html");'>Testimonials</a></li> 
 
     <li><a href="#" onclick='$("#content_item").load("projects.html");'>Projects</a></li> 
 
     <li><a href="#" onclick='$("#content_item").load("contact.html");'>Contact Us</a></li> 
 
     </ul> 
 
    </div><!--close menubar--> \t 
 
    
 
\t <div id="site_content"> \t \t 
 

 
\t <div class="sidebar_container">  
 
\t \t <div class="sidebar"> 
 
      <div class="sidebar_item"> 
 
      <h2>Nieuws</h2> 
 
      <p>Welcome to our new website. Please have a look around, any feedback is much appreciated.</p> 
 
      </div><!--close sidebar_item--> 
 
     </div><!--close sidebar-->  \t \t 
 
\t \t <div class="sidebar"> 
 
      <div class="sidebar_item"> 
 
      <h2>Latest Update</h2> 
 
      <h3>March 2013</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim.</p>   
 
\t \t </div><!--close sidebar_item--> 
 
     </div><!--close sidebar--> 
 
\t \t <div class="sidebar"> 
 
      <div class="sidebar_item"> 
 
      <h3>February 2013</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim.</p>   
 
\t \t </div><!--close sidebar_item--> 
 
     </div><!--close sidebar--> 
 
\t \t <div class="sidebar"> 
 
      <div class="sidebar_item"> 
 
      <h3>January 2013</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim.</p>   
 
\t \t </div><!--close sidebar_item--> 
 
     </div><!--close sidebar--> \t \t 
 
     <div class="sidebar"> 
 
      <div class="sidebar_item"> 
 
      <h2>Contact</h2> 
 
      <p>Phone: +44 (0)1234 567891</p> 
 
      <p>Email: <a href="mailto:info@youremail.co.uk">info@youremail.co.uk</a></p> 
 
      </div><!--close sidebar_item--> 
 
     </div><!--close sidebar--> 
 
     </div><!--close sidebar_container--> \t 
 
\t 
 
\t <div class="slideshow"> 
 
\t  <ul class="slideshow"> 
 
      <li class="show"><img width="680" height="250" src="images/home_1.jpg" alt="&quot;Enter your caption here&quot;" /></li> 
 
      <li><img width="680" height="250" src="images/home_2.jpg" alt="&quot;Enter your caption here&quot;" /></li> 
 
     </ul> 
 
     </div> \t \t 
 
\t 
 
\t <div id="content"> 
 
     <div class="content_item"> 
 
\t \t </div><!--close content_item--> 
 
     </div><!--close content--> 
 
\t </div><!--close site_content--> 
 
    
 
\t <div id="content_bottom"> 
 
\t <div class="content_bottom_container_box"> 
 
\t \t <h4>Latest Blog Post</h4> 
 
\t  <p> Phasellus laoreet feugiat risus. Ut tincidunt, ante vel fermentum iaculis.</p> 
 
\t \t <div class="readmore"> 
 
\t \t <a href="#">Read more</a> 
 
\t \t </div><!--close readmore--> 
 
\t </div><!--close content_bottom_container_box--> 
 
     <div class="content_bottom_container_box"> 
 
     <h4>Latest News</h4> 
 
\t  <p> Phasellus laoreet feugiat risus. Ut tincidunt, ante vel fermentum iaculis.</p> 
 
\t  <div class="readmore"> 
 
\t \t <a href="#">Read more</a> 
 
\t \t </div><!--close readmore--> 
 
\t </div><!--close content_bottom_container_box--> 
 
     <div class="content_bottom_container_boxl"> 
 
\t \t <h4>Latest Projects</h4> 
 
\t  <p> Phasellus laoreet feugiat risus. Ut tincidunt, ante vel fermentum iaculis.</p> 
 
\t  <div class="readmore"> 
 
\t \t <a href="#">Read more</a> 
 
\t \t </div><!--close readmore--> \t 
 
\t </div><!--close content_bottom_container_box1-->  
 
\t <br style="clear:both"/> 
 
    </div><!--close content_bottom--> 
 
    
 
    </div><!--close main--> 
 
    
 
    <div id="footer"> 
 
\t <a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a> | <a href="http://fotogrph.com/">Images</a> | <a href="http://www.heartinternet.co.uk/vps/">Virtual Server</a> | website template by <a href="http://www.araynordesign.co.uk">ARaynorDesign</a> 
 
    </div><!--close footer--> 
 
    
 
</body>

Я добавил CSS часть для DIV контента и код, я использую, надеюсь, вы, ребята, можете найти проблему, потому что я не могу показаться, чтобы выяснить, почему это не работает ...

редактировать: Я добавил весь код, чтобы он легче помочь мне с этим ...

Answer 1

Попробуйте это:

function load_home() { 
    document.getElementById("content").innerHTML='<object type="text/html" data="main.html" ></object>'; 
} 

Answer 2

начало загрузки JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

Удалить OnClick события из Li элемента, как этот

<div id="menubar"> 
    <ul id="menu"> 
     <li class="current"><a href ="#">Home</a></li> 
    </ul> 
</div> 

Затем добавить событие щелчка, когда документ загружен

$(document).ready(function(){ 
    $(".current").click(function(){ 
     $("#content").load("yourDocument.html"); 
    }); 
}); 

Примечание

Из-за ограничения безопасности браузера, большинство запросов «Ajax» (http://api.jquery.com/load/) подлежит одной и ту же политику происхождения; запрос не может успешно получить данные из другого домена, субдомена, порта или протокола.

Answer 3

отказ от ответственности: я просто заявляю о возможной причине, почему ваш материал не работает, я не рекомендую вам делать это таким образом.

В вашем HTML, у вас есть только OnClick для первого пункта меню ... которые у не желающей это ....

<ul id="menu"> 
    <li class="current"> 
     <a href="#" onclick='$("#content_item").load("main.html");'>Home</a> 
    </li> 
    <li> 
     <a href="#" onclick='$("#content_item").load("ourwork.html");'>Our Work</a> 
    </li> 
    <li> 
     <a href="#" onclick='$("#content_item").load("testimonials.html");'>Testimonials</a> 
    </li> 
    <li> 
     <a href="#" onclick='$("#content_item").load("projects.html");'>Projects</a> 
    </li> 
    <li> 
     <a href="#" onclick='$("#content_item").load("contact.html");'>Contact Us</a> 
    </li> 
</ul> 

Answer 4

По вашему HTML код «content_item» является имя класса. В вашем коде вы ссылаетесь на этот div как Id.

Вместо этого

onclick='$("#content_item").load("ourwork.html"); 

Использование

onclick='$(".content_item").load("ourwork.html"); 

В JQuery, чтобы получить доступ к элементу по Id используйте префикс # и для класса использования . (Dot)