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

在我的项目中，在一个页面，alphabet.php上，我在页面上有一个侧边栏，可以在Contentdiv中加载不同的php页面。喜欢这个：

网页侧边菜单

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

单击顶部菜单和页脚导航时，也应加载相同的内容。同时滚动到内容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));
});

}(;

编辑：我将主菜单中的URL更改为alphabet.php#a.php等，如果您在当前页面(alphabet.php(，它将内容加载到div中。如果您在另一个页面上，则不会。

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

这是我如何进行导航我写了这样的链接：

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

因此，当有人单击菜单链接时，load 函数将转到特定页面(在我们的例子中是 page1.html 或任何其他页面(，并返回带有 id 的div HTML内容作为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网址因此它不会加载任何内容。

因此，您可以做的是将整个网址放在页面上，即 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。

相关内容

最新更新

热门标签：