[英]Navigation Menu Links
我最近开始重组一个网站,该网站目前使用框架和框架集。
我现在采用了典型的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>
当我指定“内容”页面时,这非常有用,但是,当我在“导航”菜单-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>
我将如何创建一个函数来执行此操作的任何想法将不胜感激。
谢谢
2013年6月21日更新的基本网站骨架:
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>
谢谢
您可以为菜单中的每个链接添加对以下函数的调用:
<a onclick="$.get('Information.html', processContent, 'html')" >Information</a>
如您所见,您将重用第一次用于加载内容的相同功能:
$.get('Information.html', processContent, 'html')
这样,您刚刚调用了相同的“ processContent”,但要加载不同的页面。 您可以通过添加第三个函数来简化onclick事件,该函数将由onclick(或href)调用,然后将调用该函数以加载内容,如下所示:
<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>
您无需通过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事件,并在将标记的href值传递给processContent函数之前获取该值
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.