Question

<html>
<head>
<title></title>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript"> 

$(function() {
    $('#myList').delegate('li', 'click', function() {
    var text =  $(this).attr('id');
    var hashname = "#" + "content";
    var linkname = text + ".html";
        alert(text);

  $(hashname).load(linkname); 
    });
});
</script> 
 <ul id="myList" class="dropdown-menu">
                            <li id="about"> <a href="about.html">About us</a></li>
                            <li id="Services"><a href="#">Services</a></li>
                            <li id ="faq"><a href="faq.html">FAQ</a></li>

                        </ul>
</head>

<body>
    Main Content
</div>
<br />

<div id="content"></div>

</body>
</html>

我想只加载一次标头，并希望通过创建差异页面来动态加载内容。上面的代码在mozilla中运行良好，但在Chrome或IE中无法正常工作。请帮忙。

以下是Services.html

<p>This is dynamic content of service page</p>
<ul id="myList" class="dropdown-menu">

    <li><a href="services.html">Services</a></li>

</ul>

Answer 1

尝试使用HTML帮助程序而不是url字符串。那个网址你可能不正确。

尝试在标题页中执行以下操作：

<head>
<title></title>
<script src="jquery-1.10.2.js"></script>

    <script type="text/javascript"> 
    $(function() {
        $('#myList').delegate('li', 'click', function() {
            var url = $(this).data('url');

            alert(text);

            $("#content").load(url); 
        });
    });
    </script> 

     <ul id="myList" class="dropdown-menu">
          <li id="about" data-url="@Url.Action("about", "myController")"> <a href="#">About us</a></li>
          <li id="Services" data-url=""><a href="#">Services</a></li>
          <li id ="faq" data-url="@Url.Action("faq", "myController")"><a href="#">FAQ</a></li>        
     </ul>
 </head>

但通常做的是这样的事情：

<html>
  <head>
   <title></title>
   <script src="jquery-1.10.2.js"></script>

   <ul id="myList" class="dropdown-menu">
     <li id="about"> <a href="@Url.Action("about", "myController")">About us</a></li>
     <li id="Services"><a href="#">Services</a></li>
     <li id ="faq"><a href="@Url.Action("faq", "myController")>FAQ</a></li>
   </ul>
  </head>

  <body>
    Main Content
    <br />

    <div id="content">
      @RenderBody()
    </div>

  </body>
</html>

更新以完成我对您问题的回答：

代码存在一些问题。

首先，标签有一个href所以，你用户点击代码执行是假设页面被重定向到那个链接引用而且JS正在尝试做同样的事情，有点奇怪。

其次，一些JS功能不适用于每个浏览器。但是IE和Chrome支持.load（），但问题可能出现在$（hashname）和我在上面提到的原因上传递给linkname的url（我不是专家，但我认为通常是HTTP GET请求不支持最终的.html网址结构）。因此，尝试我的解决方案并提供反馈更好

Answer 2

你是从file:///运行这些吗？ IE在本地运行时不允许文件访问，Chrome在启动浏览器时需要设置--allow-file-access-from-files标记。 Firefox并没有这些限制，因此您的项目可以按照您的预期运行。

要解决这些问题，请在本地网络服务器中运行您的项目。

$（#divname）.load（html代码）在chrome中不起作用; IE

2 个答案: