jquery - 需要在中间 'div' 左侧 'div' 显示一个列表项触发的 html 页面

Question

我的网页左侧“div”中有一个列表项菜单。我目前正在选择列表项之一并打开一个新网页。

当选择左侧“div”中的列表项时，我希望内容显示在我的中心“div”中。

我怎样才能做到这一点？

我在“col2”(左侧)中有列表项，我将 html 页面发布到“col1”(中间)。这目前只会发布一个 html 页面(如果我可以让它工作的话)。因此，我需要修复此脚本并修改它以加载三个 html 页面之一。

脚本:

<script type="text/javascript">
    $(document).ready( 
function(){ 
    $('a.openInThisPage').click( 
        function(){ 
            $('#col1').load('.\listOfServices.htm'); 
            return false; 
        }); 
}); 


    </script>

HTML:

<div class="col2">
                    <!-- Column 2 start, left side -->
                    <ul class="slidedoormenu">
                        <li><a href="#">» List of Services</a></li>
                        <li><a href="#">» Pricing Stucture</a></li>
                        <li><a href="#">» About Me</a></li>
                    </ul>
                    <!-- Column 2 end -->
</div>

Answer 1

这相对容易，使用 jQuery(您将其包含在标签中，所以我假设您可以为此使用它):

$(document).ready(
function(){
    $('a.openInThisPage').click(
        function(){
            $('#newContent').load('path/to/htmlFile.html #idOfTheContentYouWantToLoad');
            return false;
        });
});

带有标记

<a href="path/to/htmlFile.html" class="openInThisPage">Click to view new content</a>

<div id="newContent">
</div>

我有 a demo of this on my own site ，因为它给了我一个与神秘博士一起做某事的借口。

这使用了 jQuery 的 load()将远程内容加载到指定的 div 中； load() 获取包含两项的字符串:

1. 要加载到当前页面的页面的 URL，以及
2. 一个选择器，用于标识您要将该页面的哪一部分加载到当前页面。

通常的 JavaScript 警告适用，当然，您仅限于来自相同(子)域的页面，并且它可能会导致书签问题(除非您以某种方式在 URL 中反射(reflect)新内容)。

---

根据 OP 发布的代码进行编辑。

鉴于您发布的 (x)html 不包含我发布的类的任何 a 元素，您需要将 jQuery 调整为以下内容:

$(document).ready(
function(){
    $('#slidedoormenu a').click(
        function(){
            $('#col1').load('.\listOfServices.htm');
            return false;
        });
});

请注意 URL 中的 \ 可能会导致问题(我不太确定，但这是我第一次看到它在 URL 中使用，所以我不确定是否有效)。

---

针对 OP 的评论进行了编辑:

@David, I have one more question on this thread. How do I have one of the pages 'defaulted' to appear in the right column (i.e., before the link is clicked by the user)? Thanks again, jmac

您可以简单地使用 $(document).ready():

$(document).ready(
function(){
  $('#newContent').load('path/to/htmlFile.html #idOfTheContentYouWantToLoad');
}
);