导航菜单链接

Question

I've recently started restructuring a website, which currently uses frames and framesets. 我最近开始重组一个网站，该网站目前使用框架和框架集。

I have now adopted a typical structure.html : 我现在采用了典型的structure.html ：

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

With the following jQuery scripts to populate the DIVs: 使用以下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>

This works great when i specify the Content page, however, i need some kind of jQuery function that forwards/populates the DIV with the correct content when clicking on an item in my Navigation menu - index.html : 当我指定“内容”页面时，这非常有用，但是，当我在“导航”菜单-index.html中单击某个项目时，我需要某种jQuery函数，以正确的内容转发/填充DIV。

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

Any ideas how how i can create a function to do this would be greatly appreciated. 我将如何创建一个函数来执行此操作的任何想法将不胜感激。

Thanks 谢谢

Update 21-06-2013 Basic Site Skeleton: 2013年6月21日更新的基本网站骨架：

Index.html 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: 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: 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 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>

Thanks 谢谢

Answer 1

You can, for each link in the menu, add a call to a function like this: 您可以为菜单中的每个链接添加对以下函数的调用：

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

As you see, you will reuse the same function used to load the content the first time: 如您所见，您将重用第一次用于加载内容的相同功能：

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

In this way,you have just called the same 'processContent' but for a different page to load. 这样，您刚刚调用了相同的“ processContent”，但要加载不同的页面。 You can simplify the onclick event more by adding a third function which will be called by the onclick(or href) and then, will call the function to load the content, like this: 您可以通过添加第三个函数来简化onclick事件，该函数将由onclick（或href）调用，然后将调用该函数以加载内容，如下所示：

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

or this one: 或这一个：

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

and then add this simple function: 然后添加以下简单功能：

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

Obviously you can't use this function to load external content, because it's forbidden by the browsers 显然，您不能使用此功能加载外部内容，因为浏览器禁止使用此功能

Your index page should be something like this, please pay attention to the div with id "pageContent" in it the pages will be loaded and to the function you need to have to load contents in your page. 您的索引页面应该是这样的，请注意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>

Answer 2

There is no need for you to load all those elements via javascript. 您无需通过javascript加载所有这些元素。 In fact I would argue that it's bad practice. 实际上，我认为这是不好的做法。 You're making unnecessary calls that will lead to longer loading times for your visitors. 您正在拨打不必要的电话，这将导致访问者的加载时间更长。 The standard practice is to load your initial content and then use javascript as needed to respond to user commands. 标准做法是加载您的初始内容，然后根据需要使用javascript来响应用户命令。

I understand what you're trying to do with splitting up the content into separate partials (Header, footer, etc..) but this isn't usually how it's done. 我知道您正在尝试将内容拆分为单独的部分（页眉，页脚等），但这通常不是这样做的。 There are some template engines that would do exactly what you're trying to achieve without requiring extra ajax calls to pull in regular html content. 有一些模板引擎可以完全实现您要达到的目的，而无需额外的ajax调用即可提取常规的html内容。 Here are some basic examples of separating out reusable content: 以下是一些分离可重用内容的基本示例：

PHP (Server side): PHP （服务器端）：

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

Handlebars.js (Client side) Handlebars.js （客户端）

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

Having said that, if you absolutely must stick with the current set up, then you would just need to parse out the url from the a tag and send that to your processContent function. 话虽如此，如果您绝对必须坚持当前的设置，那么您只需要从a标记中解析出url并将其发送到processContent函数即可。 Here is an example of how you can do that using jquery: 这是一个如何使用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"); });
});

The above code basically just binds to the click event of every li and grabs the a tag's href value before passing that value to your processContent function 上面的代码基本上只绑定到每个li的click事件，并在将标记的href值传递给processContent函数之前获取该值

导航菜单链接

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-06-18 16:42:15

解决方案2
0 2013-06-17 16:35:12

导航菜单链接

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-06-18 16:42:15

解决方案2 0 2013-06-17 16:35:12

解决方案1
1 已采纳 2013-06-18 16:42:15

解决方案2
0 2013-06-17 16:35:12