Question

在我的网站上，我希望在侧边栏中有一个链接列表（leftcol），点击其中一个链接会将新内容从另一个HTML文件加载到“内容”部分（rightcol）服务器。我不希望有二十个不同的页面，几乎完全相同的内容被反复复制。我在下面显示了我的代码，请注意我在服务器上有一个名为“AboutUsInfo.html”的文件，该文件已经使用了.load中该HTML文件的完整路径。这是我在jQuery中做的第一件事，所以请让我知道我错过了什么！

<div id="leftcol">
        <h1>
            About Us
        </h1>
<script type="text/javascript">
    $('#omicronchapterlink').click(function(){
    $('#rightcol').load('Z:\\NewSite\PagesContent\AboutUsInfo.html #OmicronChapter');
            });
</script>
    <a href="#" id="omicronchapterlink">About Us</a>
        </div>

    <div id="rightcol"></div>

Answer 1

注册“omicronchapterlink”的click事件的脚本不会等到元素在DOM中准备就绪。用户jQuery的$(document).ready为此。

<div id="leftcol">
    <h1>
        About Us
    </h1>
<script type="text/javascript">
  $(document).ready(function(){
    $('#omicronchapterlink').click(function(){
        $('#rightcol').load('Z:\\NewSite\PagesContent\AboutUsInfo.html #OmicronChapter');
    });
  });
</script>
<a href="#" id="omicronchapterlink">About Us</a>
    </div>

<div id="rightcol"></div>

Answer 2

将jQuery包装在$(document).ready(function(){})中，以便等待DOM准备就绪。
使用relative路径代替absolute路径。
你说I have a list of links in the sidebar (leftcol) and clicking on one of those links will load new content。请确保您没有为左列中的每个链接使用相同的ID，例如omicronchapterlink。 ID必须是唯一的，因此请改用class。

所以你的脚本应该是这样的：

  $(document).ready(function(){
    $('.omicronchapterlink').click(function(){ //changed to class just to be sure
        $('#rightcol').load('your/relative/path/to/AboutUsInfo.html #OmicronChapter');
    });
  });

还要确保正确添加了jQuery脚本。

Answer 3

从Google CDN中包含jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

OR

<script src="[relative path to]/jquery-1.10.2.min.js"></script>

Javascript功能

<script type="text/javascript">
function showStaticPages(url) {
    $('#rightcol').load(url);
}
</script>

<强> HTML

<div id="leftcol">
    <h1>
        About Us
    </h1>
    <a href="#" id="omicronchapterlink" onClick="showStaticPages("[relative path to]/AboutUsInfo.html #OmicronChapter")">About Us</a>
</div>

<div id="rightcol"></div>

使用jQuery .load和内容将无法正确加载

3 个答案: