0

在我的网站上，我希望在侧边栏（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>
4

3 回答 3

0
  1. 将你的 jQuery 包裹在里面$(document).ready(function(){})，这样它就会等待 DOM 准备好。
  2. 使用relative路径而不是absolute路径。
  3. 你说I have a list of links in the sidebar (leftcol) and clicking on one of those links will load new content。确保您没有omicronchapterlink为左列中的每个链接使用相同的 id。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正确添加了脚本。

于 2013-08-07T03:55:22.450 回答
0

为“omicronhapterlink”注册点击事件的脚本不会等到元素在 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>
于 2013-08-07T03:36:53.967 回答
0

包括来自 Google CDN 的 jquery

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

或者

<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>
于 2013-08-07T07:21:01.360 回答