Question

我有一个菜单栏，其中包含标题中的链接。当您单击链接时，我只想更改主div中的内容。我想在php中这样做，但你必须重新加载页面。所以我需要在javascript中完成它，但我不知道javascript。

这是标题div中的菜单代码：

<ul id="nav">
    <li><a href="#">Enter Information</a></li>
    <li><a href="#">View Records</a></li>
    <li><a href="#">View Upcoming</a></li>
</ul>

Answer 1

根据内容的类型，您可以选择一些选项。如果您需要将新页面加载到主要内容中，可以使用iframes和一些javascript。如果您需要加载简单文本，只需使用javascript。

根据你的反馈意见，你会做这样的事情（注意 - 我正在从语法上开始关注语法，但这通常是你的代码需要看起来的样子）：

<a href="#" onclick="UpdateIFrame('mypage.html')">Link 1</a>

<iframe id="MainContent">
</iframe>

<script>
   function UpdateIFrame( newPageAddress ){
     document.getElementById("MainContent").contentWindow.location = newPageAddress;
   }
</script>

Answer 2

如果您考虑使用PHP，我想您必须加载动态内容。为此，我建议您使用AJAX

最简单的方法是使用一个框架，就像着名的Jquery一样。示例here

Answer 3

您不需要任何锚元素。 W3 example

<script>
$(document).ready(function() {
    $('.menu').click(function() {
            $("div").load('somecontent.txt');       
    });
});
</script>

<ul>
    <li class="menu">Enter Information</li>
    <li class="menu">View Records</li>
    <li class="menu">View Upcoming</li>
</ul>

Answer 4

这里我假设您通过函数调用content()

获取内容

var list=document.getElementById('nav');
var links=list.getElementsByTagName('a');
var header=document.getElementById('header');
for (var i=0;i<links.length;i++)
{
links[i].onclick=function() {
header.innerHTML=content();       //here you can use something else to generate the content
}
}

Answer 5

为了动态加载内容（例如来自使用php / sql的服务器）而无需重新加载网站 Ajax 正是您所需要的。

不应使用内联框架（前面提到过），因为它们已被弃用。

W3schools为Ajax提供了一个非常基本但直截了当的tutorial。

Answer 6

您想使用jquery来构建这样的内容。如果您认真构建Web应用程序，则需要学习如何使用它（或类似MooTools的类似框架）

对于这个特殊问题，我会使用现有的菜单系统，这是我找到的第一个jquery based menus列表，但还有更多。

使用另一个div中的链接更改div内容

6 个答案: