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

【问题标题】：Load dynamic content in div from different navbars从不同的导航栏加载 div 中的动态内容
【发布时间】：2018-04-30 10:30:29
【问题描述】：

在一个页面，alphabet.php，在我的项目中，我在页面下方有一个侧边栏，用于在 Content div 中加载各种 php 页面。像这样：

HTML 侧边菜单

<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>

$(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);
 });
});

单击顶部菜单和页脚导航时也应加载相同的内容。同时滚动到 Content div。

HTML 主菜单

<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 等，如果您在当前页面 (alphabet.php) 上，它将内容加载到 div 中。如果您在另一个页面上，则不会。

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

【问题讨论】：

我希望这个链接能帮助link
@vikscool 我做了一个加载函数，但不能让它正常工作。不知何故， preventDefault 被覆盖，因为它加载页面但不在 Content div 中

标签： javascript html navigation

【解决方案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>

如果您在href= 中使用javascript:void(0)，则无需调用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 或任何其他页面）并返回 div 的 HTML 内容和 id作为div1，并将数据加载到特定的div（即id为content的div）。

编辑 2

JQuery 的Load() 在Jquery Load 上有更好的解释，您可以使用它来了解更多信息。

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

所以，您可以做的就是将整个 url 放在页面上，即 www.yourdomain.com/page.html #divid 在属性 data-href 中，或者您可以在 javascript 调用函数上创建特定的 url，例如：

$(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 将为您提供网站运行所在的域，无论是散列还是斜杠，然后它将与 linkPage 连接起来，并为被调用的页面创建正确的 url。

【讨论】：

好的，我会试试的。但是导航中的#div1、#div2和#div3是什么？
试过这个，但不能让它工作：
一个

@MiaRaunegger 如果您想检查是否从页面链接获取数据，或者不尝试在没有从中获取数据的 div 的特定 url 上执行 $.get 请求例如：('/a.php')。如果没有，它将为您提供给定 url 的 html 内容，请检查控制台是否有错误。

它将内容加载到 div 中，但前提是您在当前站点上。不是别人的

Cross - domain 将不允许您访问与调用域不同的域。因此，如果您仍然不想这样做（我不会推荐），您必须发出服务器端请求。