AJAX Nav 在 Windows 或 Mac 或 PC 上的 Safari 中不起作用

Question

我有一个将通过 jQuery 加载的菜单，但作为单独的 html 文件维护，以便能够在一个简单的地方更新它，而不是在每个页面上更新任何时候有变化。菜单在每个浏览器中都运行良好，然后突然在 Windows 的所有浏览器和 Mac 或 Windows 的 Safari 中停止工作。它仅适用于 Chrome 和 Mac 上的 FF，其余仅填充文本，但链接不活动。我不确定我是否没有在头部声明 jQuery 的正确版本（或者如果我更改为最新版本，它是否会像我在其他情况下看到的那样破坏其他东西） - 我有 1.7 和1.8加载。我的代码或结构哪里出错了？请指教，谢谢。这是页面：http://devious.humanalbatross.com/（仍在开发中，因此 'devious' 子域...并且链接的页面将无法正常工作，因为它们不是包含 jQuery 的菜单。

这是我的代码： --这是导航出现在任何实际页面上的地方

        <nav id="menu">
     <div class="clear"></div>
       </nav>
         <script type="text/javascript">
           $("#menu").load("main-nav.html");
         </script>

--这是实际 HTML 文件 (main-nav.html) 中的标记，jQuery 从中提取它：

                                <ul class="mainmenu">
                                <li><a href="http://www.humanalbatross.com/sonica">Sonica</a></li>
                                <li><a href="http://www.humanalbatross.com/wavywinds">Wavywinds</a></li>
                                <li><a href="http://www.humanalbatross.com/staticmotion">StaticMotion</a></li>
                                <li><a href="http://www.humanalbatross.com/porousmind">PorousMind</a></li>
                                <li><a href="http://www.humanalbatross.com/contact">Speak To Me</a></li>
                                <div class="clear">
                                </div>
                            </ul>

Answer 1

您的问题与您的 javascript 实施无关，而是与您的 css.

将以下样式附加到您的 style.css（第 101 行）

header {
   /* other styles */
   position: relative;
   z-index: 10;
}

此问题是由 section#homeContent 引起的，边距设置为 margin: -100px 0 0 0; 并覆盖了您的 header。看看概述问题的屏幕截图。

我的 css 将元素 header 的默认堆栈顺序更改为 10。所以基本上你的 header 现在在你的 homeContent 之上。

AJAX Nav 在 Windows 或 Mac 或 PC 上的 Safari 中不起作用

AJAX Nav doesn't work in Windows or Safari on Mac Or PC

html

ajax

jquery

menu