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

如果你真的想这样做，你有两个基本选择。

框架，会导致书签，链接共享，打印和搜索引擎索引出现问题。
使用JavaScript（和Ajax技术）伪造框架，这些框架在书签，链接共享和搜索引擎索引以及对JavaScript的依赖方面存在不同的问题。

您几乎总是最好只拥有多个页面，并在每个页面中包含常见内容。模板或包含系统可以帮助您。我更喜欢包含Template-Toolkit的ttree utility，用于从模板生成静态页面，但也可以用于从Perl动态生成页面。 TT有一个简单的include指令和一个更强大的wrapper指令（该网站有good examples of both in action）。 PHP是一种流行的选项，并且有一个include指令。

Answer 2

这是相对容易的，使用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，因为它给了我一个借口与Doctor Who做点什么的借口。

这使用jQuery的load()将远程内容加载到命名的div; load()需要两个项目：

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

通常的JavaScript警告适用，当然，您仅限于来自同一（子）域的页面，并且它可能导致书签问题（除非您以某种方式反映URL中的新内容）。 / p>

根据OP发布的代码编辑。

鉴于您发布的（x）html不包含我发布的类的任何a元素，您需要调整jQuery以适应以下内容：

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

请注意，网址中的\可能会导致问题（我不完全确定，但这是我第一次看到它在网址中使用过，所以我不确定它是否有效或不）。

@David，我在这个帖子上还有一个问题。如何让其中一个页面“默认”出现在右栏中（即，在用户点击链接之前）？再次感谢，jmac

您只需使用$(document).ready()：

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

Answer 3

确保使用David Thomas的代码（这是正确而简单的方法）在页面上包含jquery文件

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<!--  Fallback for CDN -->
<script>!window.jQuery && document.write('<script src="/js/jquery.js"><\/script>')</script>

或者简单地说：

<script src="/js/jquery.js"></script>

需要显示由中心'div'左侧'div'中的列表项触发的html页面

3 个答案: