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

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

单击顶部菜单和页脚导航时，也应加载相同的内容。 并同时滚动到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等，如果您在当前页面（alphabet.php）上，它将内容加载到div中。 如果您在另一个页面上则不会。

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

如果您在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或其他任何页面），并返回id为div1的div的HTML内容，并将数据加载到特定页面div（即具有id content div）。

编辑2

jQuery的的Load()是更好的对这个解释jQuery的负荷，你可以用它来了解更多关于它。

因此，我认为您正在执行的操作是从域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放在页面上， www.yourdomain.com/page.html #divid放在属性data-href要么在javascript调用funciton之类的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。

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

问题描述

1 个解决方案

解决方案1
0 2018-05-02 15:27:57

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

问题描述

1 个解决方案

解决方案1 0 2018-05-02 15:27:57

解决方案1
0 2018-05-02 15:27:57