使用javascript加载到div中的内容出现在一个小方块中

时间:2015-02-03 08:10:43

标签: javascript html

我一直在为一个朋友编写一个项目的网站,我正在努力。花了更多的时间,我应该研究如何使用JavaScript来使网站链接加载到内容"我得到了它的工作,第二个问题:内容加载但位于"内容"内的一个小方块内。 div我想知道如何调整下面div中显示的内容是我的页面代码

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<title>Breezies Blog</title>
<style>
.header {
    background-color: white;
    background-image: url('file:///C:/Users/Zenga/Desktop/egoblog/bg21.png');
    background-size: cover;
    background-repeat: no-repeat;
    color: black;
    text-align: center;
    max-width: 1000px;
    height: 187px;
    margin: 0 auto;
    margin-top: 5px;
    border: 1px solid white;
    border-radius: 20px;
    position: static;
  }
a {
    color: white;
  }
ul {
    padding: 5px;
    background: rgba(0,0,0,.5);
    position: relative;
    top: 142px;
    border-radius: 10px;

  }
li {
    display: inline;
    padding: 0px 5px 0px 5px;
    margin: 0px 0px 0px 0px;
  }
body {
     background-image: url('file:///c:Users/Zenga/Desktop/egoblog/fullbg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    color: black;
   }
section {
    background-color: rgba(0,0,0,.5);
    color: white;
    position: relative;
    height: 600px;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 20px;
  }
 </style>
 </head>
<body>
<div class="header">
  <nav id="menu">
    <ul>
      <li><a href="#" onclick="load_home()">Home</a></li>
      <li><a href="#" onclick="load_cast()">Cast Of Characters</a></li>
      <li><a href="#" onclick="load_hist()">History of Ego</a></li>
      <li><a href="#" onclick="load_create()">Meet the Creators</a></li>
    </ul>
  </nav>
</div>
<br>
<section>
<div class="content" id="content"> </div>
</section>
<script>
function load_home(){
document.getElementById("content").innerHTML='<object type="text/html" style="overflow: hidden" data="main.html"></object>';
  }
function load_cast(){
document.getElementById("content").innerHTML='<object type="text/html" style="overflow: hidden" data="cast.html"></object>';
  }
function load_hist(){
document.getElementById("content").innerHTML='<object type="text/html" data="hist.html"></object>';
  }
function load_create(){
document.getElementById("content").innerHTML='<object type="text/html" data="create.html"></object>';
  }
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

你没有给内容div一个大小所以它只是自动,给它一个最小宽度和最小高度