导航菜单链接答案

【问题标题】：Navigation Menu Links导航菜单链接
【发布时间】：2013-06-21 19:30:33
【问题描述】：

我最近开始重组一个网站，目前使用框架和框架集。

我现在采用了一个典型的structure.html：

<body>
<div>
    <div id="headerNavigation"></div>
    <div id="PageContent"></div>
    <div id="footer"></div>
</div>
</body>
</html>

使用以下 jQuery 脚本填充 DIV：

<head>
<script>
$.get('PageHeader.html', processHeader, "html").fail(function() { alert("There is a problem loading the header. Please re-try"); });
function processHeader(file_data)
{
    $("#headerNavigation").html(file_data);
}

$.get('TermsConditions.html', processContent, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });
function processContent(file_data)
{
    $("#PageContent").html(file_data);
}

$.get('Footer.html', processFooter, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });
function processFooter(file_data)
{
    $("#Footer").html(file_data);
}
</script>
</head>

当我指定内容页面时，这很有效，但是，我需要某种 jQuery 函数，当单击导航菜单中的项目时，使用正确的内容转发/填充 DIV - index.html强>：

<html>
<head>
<!-- jQuery code for drop down nav menus  -->
<script type="text/javascript"> 
    $(document).ready(function(){        
        $('nav li ul').hide().removeClass('fallback');
        $('nav li').hover(
            function () {
                $('ul', this).stop().slideDown(300);
            },
            function () {
                $('ul', this).stop().slideUp(300);
            }
        );       
    });
</script>

</head>
<body>

<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
    <li class="data-sources"><a href="#" title="">Date Sources <span class="icon-caret-down"></span> </a>       
        <li>
            <a href="frameset.html?Information.html">Information</a>
            <ul class="fallback">
            <li><a href="frameset.html?ovens.html">Ovens</a></li>
                <li><a href="frameset.html?fridges.html">Fridges</a></li>
                <li><a href="frameset.html?tables.html">Tables</a></li>
                <li><a href="frameset.html?costing.html">Costing</a></li>
                <li><a href="frameset.html?install.html">Installation</a></li>
            </ul>
        </li>
        <li>
            <a href="frameset.html?legal.html">Legal Info</a>
            <ul class="fallback">
                <li><a href="frameset.html?terms.html">Terms & Conditions</a></li>
                <li><a href="frameset.html?data.html">Data Protection</a></li>                  
            </ul>
        </li>
        <li>
            <a href="frameset.html?contact/html">Contact Us</a>
            <ul class="fallback">
            <li><a href="javascript:openHelpWind('contact')">Contact Details</a></li>
                <li><a href="frameset.html?comments.html">Your Comments</a></li>
                <li><a href="frameset.html?addinfos.html">Additional Info</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Need Help?</a>
            <ul class="fallback">
            <li><a href="javascript:parent.PageHeader.openHelpWind(helpContext)">Need Help</a></li>
                <li><a href="externalsite">FAQs</a></li>
                <li><a href="externalsite">Ask our Experts</a></li>
            </ul>
        </li>
        <li>
            <a href="frameset.html?cookies.html">Cookies</a>
        </li>
    </li>
</ul>
</nav>
</body>
</html>

任何想法我如何创建一个函数来做到这一点将不胜感激。

谢谢

21-06-2013 更新基本网站骨架：

Index.html

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">

        <script src="javascript/modernizr-2.6.2.min.js"></script>

<title>Welcome</title>
<link id="productStyle" type="text/css" href="css/style.css" rel="stylesheet">

<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>

<!-- JavaScript functions to enable dropdown navigation-->
<script type="text/javascript"> 
    $(document).ready(function(){        
        $('nav li ul').hide().removeClass('fallback');
        $('nav li').hover(
            function () {
                $('ul', this).stop().slideDown(300);
            },
            function () {
                $('ul', this).stop().slideUp(300);
            }
        );       
    });
</script>

    <script type="text/javascript">

    function gofor(a) {
    $.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
    }

    function processContent(file_data)
    {
        $("#PageContent").html(file_data);
    }

</script>

</head>
<body>

<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav ">
    <li class="menu--home"><a href="index.html " title="home"><span class="icon-home"></span></a></li>      
        <li>
        <a href="frameset.html?Information.html">Information</a>
        <ul class="fallback">

            <li><a onclick="gofor('information.html')">Information (go for)</a></li>
    <li><a onclick="gofor('openaccount.html')"> New Customer (Go For)</a>

            <li><a onClick="gofor('information.html')">Information Go For onClick</a></li>
    <li><a href="javascript:gofor('information.html')">Information Go For HREF</a></li>


            <li><a href="frameset.html?ovens.html">Ovens</a></li>
            <li><a href="frameset.html?fridges.html">Fridges</a></li>
            <li><a href="frameset.html?tables.html">Tables</a></li>
            <li><a href="frameset.html?costing.html">Costing</a></li>
            <li><a href="frameset.html?install.html">Installation</a></li>
        </ul>
    </li>
    <li>
        <a href="frameset.html?legal.html">Legal Info</a>
        <ul class="fallback">
                     <li><a href="frameset.html?terms.html">Terms & Conditions</a></li>
                 <li><a href="frameset.html?data.html">Data Protection</a></li>                  
                       </ul>
        </li>
        <li>
            <a href="#">Contact Us</a>
            <ul class="fallback">
      <li><a href="javascript:openHelpWind('contact')">Contact Details</a></li>
                <li><a href="frameset.html?comments.html">Your Comments</a></li>
                <li><a href="frameset.html?addingds.html">Adding Directors Searches</a></li>
            </ul>
        </li>
    </li>
</ul> <!-- END menu-nav -->
</nav> <!-- END nav.site-nav -->
<!-- MENU END -->

<section>
<div class="page-heading">
    <h1 class="wrap">Welcome to Tables, Ladders and Chairs </h1>
</div>
<div>

Other welcome content

</div>
</section>
<footer class="site-footer" role="contentinfo">
<div class="wrap">
    <small>2013 TL&C’s. </small>
</div>
</footer>

Frameset.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html lang="en">
<head>
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>

<script>
$.get('PageHeader.html', processHeader, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });

function processHeader (file_data)
{
    $("#header").html(file_data);
}
</script>

</head>
<body>
<div>
    <div id="header"></div>
    <div id="PageContent"></div>
    <div id="footer"></div>
</div>
</body>
</html>

</body>
</html>

PageHeader.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="javascript/modernizr-2.6.2.min.js"></script>

<title>Page Header</title>

<link id="productStyle" type="text/css" href="css/style.css" rel="stylesheet">

<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>

<!-- JavaScript functions to enable dropdown navigation-->
<script type="text/javascript"> 
    $(document).ready(function() {       
        $('nav li ul').hide().removeClass('fallback');
        $('nav li').hover(
            function () {
                $('ul', this).stop().slideDown(300);
            },
            function () {
                $('ul', this).stop().slideUp(300);
        }
        );       
    });
</script>

    <script type="text/javascript">

    function gofor(a) {
    $.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
    }

    function processContent(file_data)
    {
        $("#PageContent").html(file_data);
    }

</script>


<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav ">
    <li class="menu--home"><a href="index.html " title="home"><span class="icon-home"></span></a></li>      
        <li>
        <a href="frameset.html?Information.html">Information</a>
        <ul class="fallback">

  <li><a onclick="gofor('information.html')">Information (go for)</a></li>
         <li><a onclick="gofor('openaccount.html')"> New Customer (Go For)</a>

            <li><a href="frameset.html?ovens.html">Ovens</a></li>
            <li><a href="frameset.html?fridges.html">Fridges</a></li>
            <li><a href="frameset.html?tables.html">Tables</a></li>
            <li><a href="frameset.html?costing.html">Costing</a></li>
            <li><a href="frameset.html?install.html">Installation</a></li>
        </ul>
    </li>
    <li>
        <a href="frameset.html?legal.html">Legal Info</a>
        <ul class="fallback">
                     <li><a href="frameset.html?terms.html">Terms & Conditions</a></li>
                 <li><a href="frameset.html?data.html">Data Protection</a></li>                  
                       </ul>
        </li>
        <li>
            <a href="#">Contact Us</a>
            <ul class="fallback">
      <li><a href="javascript:openHelpWind('contact')">Contact Details</a></li>
                <li><a href="frameset.html?comments.html">Your Comments</a></li>
                <li><a href="frameset.html?addingds.html">Adding Directors Searches</a></li>
            </ul>
        </li>
    </li>
</ul> <!-- END menu-nav -->
</nav> <!-- END nav.site-nav -->
<!-- MENU END -->

Information.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">

<head>
<title>Information</title>

<link type="text/css" rel="stylesheet" href="css/style.css">
       <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

</head>

<body>
<form>

    Information about Tables Ladders and Chairs etc.

</form>
<br>
</body>
</html>

谢谢

【问题讨论】：

标签： javascript jquery html drop-down-menu

【解决方案1】：

您可以为菜单中的每个链接添加对函数的调用，如下所示：

<a onclick="$.get('Information.html', processContent, 'html')" >Information</a>

如您所见，您将重用第一次加载内容时使用的相同函数：

$.get('Information.html', processContent, 'html')

这样，您刚刚调用了相同的“processContent”，但加载了不同的页面。您可以通过添加将由 onclick(或 href) 调用的第三个函数来进一步简化 onclick 事件，然后调用该函数来加载内容，如下所示：

<a onclick="gofor('Information.html')">Information</a>

或者这个：

<a href="javascript:gofor('Information.html')">Information</a>

然后添加这个简单的函数：

function gofor(page){    
    $.get(page, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
}

显然你不能使用这个函数来加载外部内容，因为它被浏览器禁止

您的索引页面应该是这样的，请注意其中id为“pageContent”的div，页面将被加载，以及您需要在页面中加载内容的函数。

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://modernizr.com/i/js/modernizr.com-custom-2.6.1-01.js"></script>
<title>Welcome</title>
<link id="productStyle" type="text/css" href="css/style.css" rel="stylesheet">
<!-- JavaScript functions to enable dropdown navigation-->
<script type="text/javascript"> 
    $(document).ready(function(){        
        $('nav li ul').hide().removeClass('fallback');
        $('nav li').hover(
            function () {
                $('ul', this).stop().slideDown(300);
            },
            function () {
                $('ul', this).stop().slideUp(300);
            }
        );       
    });
</script>

    <script type="text/javascript">

function gofor(a) {
$.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
    }

function processContent(file_data)
    {
        $("#PageContent").html(file_data);
    }

</script>

</head>
<body>

<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav ">
    <li class="menu--home"><a href="javascript:gofor('index.html')" title="home"><span class="icon-home"></span></a></li>      
        <li>
        <a href="javascript:gofor('Information.html')">Information</a>
        <ul class="fallback">

  <li><a href="javascript:gofor('information.html')">Information (go for)</a></li>
         <li><a href="gofor('openaccount.html')"> New Customer (Go For)</a>

            <li><a href="javascript:gofor('ovens.html')">Ovens</a></li>
            <li><a href="javascript:gofor('fridges.html')">Fridges</a></li>
            <li><a href="javascript:gofor('tables.html')">Tables</a></li>
            <li><a href="javascript:gofor('costing.html')">Costing</a></li>
            <li><a href="javascript:gofor('install.html')">Installation</a></li>
        </ul>
    </li>
    <li>
        <a href="javascript:gofor('legal.html')">Legal Info</a>
        <ul class="fallback">
                     <li><a href="javascript:gofor('terms.html')">Terms & Conditions</a></li>
                 <li><a href="javascript:gofor('data.html')">Data Protection</a></li>                  
                       </ul>
        </li>
        <li>
            <a href="#">Contact Us</a>
            <ul class="fallback">
      <li><a href="javascript:openHelpWind('contact')">Contact Details</a></li>
                <li><a href="javascript:gofor('comments.html')">Your Comments</a></li>
                <li><a href="javascript:gofor('addingds.html')">Adding Directors Searches</a></li>
            </ul>
        </li>
    </li>
</ul> <!-- END menu-nav -->
</nav> <!-- END nav.site-nav -->
<!-- MENU END -->

<section>
<div class="page-heading">
    <h1 class="wrap">Welcome to Tables, Ladders and Chairs </h1>
</div>
<div>

Other welcome content

</div>
<div id="PageContent">
</div>
<footer class="site-footer" role="contentinfo">
    <div class="wrap">
        <small>2013 TL&C’s. </small>
    </div>
</footer>

【讨论】：

@OamPsy 我不明白你为什么要修改这些页面。在索引页面中，您将拥有： html 标签javascript（菜单、加载页面）和样式这里是页面结构
(menu)

（加载页面的位置）
你想要什么
@OamPsy 我添加了一个你可以使用的索引页面的模型
问题解决了吗？加载页面时，您必须提供文件 path/page.html 的确切路径。例如，如果页面与正在加载页面的文件在同一个文件夹中，您将使用“page.html”，如果要加载的页面在文件下的文件夹中：“folder/page.html”跨度>
@OamPsy 1) 将
放入我第一次访问该页面时加载的文件中（因此每次访问该页面或访问主页时它都会可见）2) 放入它只是在 div PageContent 中，只有在我访问您的网站时才可见（如果我加载页面，然后我重新加载主页，它将不会显示） 3）在 gofor 函数中添加类似以下代码的内容： $('#idOfTheSection').hide();当页面（参数 a）是 != 来自主页（或任何你网站的主页）时，否则 $('#idOfTheSection').show();
@OamPsy 我的意思是在 url 和页面之间创建一个对应关系，现在用户必须进入您的家，然后单击内容以到达特定页面，您可以使用 url 参数（像 www.yoursite.com?page=pagename ），加载特定的内容。您只需要详细说明网址。例如：获取 url 的代码，拆分需要的部分并用 alert 显示它： var uu = document.URL; var uuu = uu.split("?page=");警报（uuu[1]）；所有的菜单链接（url）都会像：“www.mysite.it/index.html?page=name”然后，当你已经知道页面时，你可以调用 gofor(uuu[1]) 来加载内容跨度>

【解决方案2】：

您无需通过 javascript 加载所有这些元素。事实上，我认为这是不好的做法。您正在拨打不必要的电话，这将导致访问者的加载时间更长。标准做法是加载您的初始内容，然后根据需要使用 javascript 来响应用户命令。

我了解您试图将内容拆分为单独的部分（页眉、页脚等），但这通常不是这样做的。有一些模板引擎可以完全满足您的要求，而无需额外的 ajax 调用来拉入常规的 html 内容。以下是一些分离可重用内容的基本示例：

PHP（服务器端）：

<?php include 'pageheader.html'; ?>
<div>My main content</div>
<?php include 'footer.html'; ?>

Handlebars.js（客户端）

{{>pageheader}}
<div>My main content</div>
{{>footer}}

话虽如此，如果您绝对必须坚持当前的设置，那么您只需要从 a 标签中解析出 url 并将其发送到您的 processContent 函数。这是一个使用 jquery 的示例：

$('li').on('click', function (e) {
    var url = $(this).find(">:first-child").attr('href');
    $.get(url, processContent, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });
});

上面的代码基本上只是绑定到每个 li 的 click 事件，并在将该值传递给您的 processContent 函数之前获取 a 标签的 href 值

【讨论】：

感谢您的输入，抱歉，您能否在没有 PHP 的情况下进行解释，因为我只是使用 HTML、JS 和 jQuery。谢谢
我在其中包含了 php 作为服务器端引擎的一个示例，该引擎可以在页面加载时呈现部分 html 文件。您可以使用任何允许此功能的技术，其他一些技术包括 python、asp.net mvc、ruby on rails 等。我试图说明的一点是，通常您不想进行多次 javascript 调用来加载由于获取该内容所需的额外网络调用，重复出现的内容。那里有更适合该任务的语言和框架。
你是对的，使用 $('li) 点击事件显着增加了我的页面加载时间。您还能推荐哪些其他路线？
一般来说，您希望一口气提供大部分核心内容。这就是使用模板引擎的地方。如果您只能使用 HTML 和 JS，请考虑使用 Handlebars.js，但请确保预编译您的模板。如果您对学习 Handlebars 感到非常不舒服，那么请考虑在不使用 javascript 的情况下将整个 html 页面加载到一个文档中，并使用 css 隐藏您想要隐藏的内容。然后使用 javascript 在 li 点击时显示/隐藏内容，而不是从服务器加载。
如果您发现要一口气加载的内容太多，那么仍然使用 javascript 从单独的文件中加载内容，但添加一个视觉指示器（例如微调器），表明正在加载某些内容，它可以工作用户体验的奇迹。