Question

在一个页面上，alphabet.php，在我的项目中，我在页面上有一个侧边栏，在Content div中加载不同的php页面。像这样：

HTML SideMenu

<nav id="sideMenu">
        <ul class="list-unstyled components">
          <li id="a"><a href="a.php">A</a></li>
          <li id="b"><a href="b.php">B</a></li>
          <li id="c"><a href="c.php">C <span class="caret"></span></a>
             <ul>
               <li id="c1"><a href="c.php#c1">C1</a></li>
               <li id="c2"><a href="c.php#c2">C2</a></li>
            </ul>
          </li>
       </ul>
</nav>
<div id="Content">
      <h2>Lorem bla bla</h2>
        <p>lorem bla bla </p>
</div>

JS

$(function() {
'use strict';
var newHash     = '',
$content    = $("#Content");

$("#sideMenu").delegate("a", "click", function() {

    window.location.hash = $(this).attr("href");

    return false;

});

$(window).bind('hashchange', function() {

    newHash = window.location.hash.substring(1);

    $content.load(newHash);

    console.log(newHash);
 });
});

单击topmenu和footer导航时，也应加载相同的内容。同时滚动到Content div。

HTML MainMenu

<li class="dropdown"><a href="#alpha" class="dropdown-toggle" data- 
toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
Alphabet <span class="caret"></span></a>
   <ul class="dropdown-menu dropdown-menu-left" role="menu" id="alpha">
      <li><a href="alphabet.php#a.php role="button" aria-expanded="false">A</a> 
      </li>
      <li><a href="alphabet.php#b.php" role="button" aria-expanded="false">B</a> 
      </li>
      <li><a href="alphabet.php#c.php role="button" aria-expanded="false">C</a>
         <ul class="dropdown-menu dropdown-menu-left" role="menu">
            <li><a href="c.php#c1">C1</a></li>
            <li><a href="c.php#c2">C2</a></li>
         </ul>
      </li>
  </ul>
</li>

我使用此代码

解决了主菜单的JS问题

$(function() {
'use strict';
if(location.hash) $('#Content').load(location.hash.substring(1));
$('#alphaa').click(function() {
    $('#Content').load(this.hash.substring(1));
});

}）;

编辑：我将MainMenu中的URL更改为alphabet.php #a.php等，并将内容加载到当前页面上的div（alphabet.php）。如果您在其他页面上，则不会。

编辑2：主菜单JS的解决方案。现在一切正常但我想如果主菜单和侧菜单没有两个不同的js功能，你可以让它变得更漂亮，但是现在我对此很满意。它有效！

Answer 1

以下是我能够进行导航的方法我写了像这样的链接：

<a class="nav-link" href="javascript:void(0);" data-href="/page1.html #div1">Page 1</a> <a class="nav-link" href="javascript:void(0);" data-href="/page2.html #div2">Page 2</a> <a class="nav-link" href="javascript:void(0);" data-href="/page3.html #div3">Page 3</a>

如果您在javascript:void(0)中使用href=，则无需拨打event.preventDefault。

然后在我的脚本方面我写道：

$(window).on('load', function () {
$('.nav-link').on('click', function () {
    var linkPage = $(this).attr('data-href');
    if (linkPage !== undefined)
    {
        $('#content').load(linkPage);
    }
});});

注意

您需要确保的一件事是调用页面的域和数据必须来自的页面应该相同，否则您将遇到跨域问题。

修改1 #div1，#div2，。#div3基本上是各自页面上div的ID，必须从中获取数据。

例如，如果我在我的网页上有这样的内容：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Page 1</title> </head> <body> <div id="div1"> hi i am the content of page 1 </div> </body> </html>

因此，当有人点击菜单链接时，加载函数将转到特定页面（在我们的例子中是page1.html或任何其他页面）并返回HTML的{{1}}内容将div作为id并将数据加载到特定div（即ID为div1的div）。

修改2

JQuery＆＃39; content可以更好地解释Jquery Load您可以使用它来了解更多相关信息。

所以，我认为你在做的是你正在从域Load()向/page1.html创建请求，在这种情况下，www.example.com函数会调用load并将加载页面内容但如果您向其他任何其他页面发出请求，请从域www.example.com/page.html说出/page11.html，然后www.example.com/page2.html将创建此load()网址这是不正确的，因此它不会加载任何内容。

所以，你可以做的就是你可以把整个网址放在页面上，即属性www.example.com/page2.html/page11.html中的www.yourdomain.com/page.html #divid，或者你可以在javascript调用函数上创建特定网址，如：

data-href

此处$(window).on('load', function () { $('.nav-link').on('click', function () { var linkPage = $(this).attr('data-href'); if (linkPage !== undefined) { var pageUrl = window.location.origin+'any other seperation for the pages if any'+linkPage; $('#content').load(pageUrl); } }); });将为您提供运行网站的域名，无论是哈希值还是斜杠，然后它将与window.location.origin连接，并为调用的域名创建正确的URL页。

从不同的导航栏加载div中的动态内容

1 个答案: