Question

我想使用div制作HTML。我使用了4个div。欢迎，导航，页面和副本。

我想要的是当我点击导航div中的链接时，它会在内容部分显示。

这是html

<html>
<head>
<link rel="stylesheet" href="style1.css">

</head>

<body>

<div id="top1">welcome
</div>


<div id="nav">
<ul type="none">
<li ><a href="home.html" >HOME </a><li>  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<li ><a href="staff.html" >STAFF  </a><li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<li ><a href="events.html" >EVENTS </a><li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<li ><a href="about.html">ABOUT  </a><li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</ul>
</div>
<div id="pages">
</div>
<div id="copy">
copyright&copy
</div>


</body>
</html>

这是.css

#top1
{
border-width:0px;   
   border-style:none;
background-color: gray;
  width: 1350px;
    height: 90px;
    margin: 0px;

    border: 0px;
}
#nav
{
background-color: green;
width: 1350px;
 height: 30px;
  margin: 0px;
}
#pages
{
background-color: red;
width: 1350px;
 height: 510px;
  margin: 0px;
}
#copy
{
background-color: orange;
width: 1350px;
 height: 20px;
  margin: 0px;
}
#nav {
   float:left;
   width:100%;
   background:blue;
   border-bottom:4px solid #000;
   overflow:hidden;
   position:relative;
}
#nav ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#nav ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#nav ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:red;
   text-decoration:none;
   line-height:1.3em;
}
#nav ul li a:hover {
   background:yellow;
   color:red;
}
#nav ul li a.active,
#nav ul li a.active:hover {
   color:orange;
   background:yellow;
   font-weight:bold;
}

Answer 1

尝试jQuery .ajax()。

<html>
<head>
<link rel="stylesheet" href="style1.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
    $("#nav a").click(function(e){
        e.preventDefault();
        var vurl = "'" + $(this).attr('href') + "'";
        $.ajax({
          url: vurl,
          cache: false
        })
          .done(function( html ) {
            $( "#pages" ).html( html );
          });
    });
});
</script>
</head>

<body>

<div id="top1">welcome
</div>


<div id="nav">
<ul type="none">
<li ><a href="home.html" >HOME </a><li>  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<li ><a href="staff.html" >STAFF  </a><li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<li ><a href="events.html" >EVENTS </a><li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<li ><a href="about.html">ABOUT  </a><li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</ul>
</div>
<div id="pages">
</div>
<div id="copy">
copyright&copy
</div>


</body>
</html>

详情请参阅jQuery.ajax()

如何将nav <div>中的对象显示到内容<div> </div> </div>

1 个答案: