Javascript锚导航
我正在创建一个网站，其中包含与Facebook和谷歌邮件一起使用的“锚导航”。 我有它工作但不完全。 当我用#contact之类的东西加载页面时，除非我点击它的链接，否则它不会加载它。 此外，是否有更好，更有效的方式来做我正在做的事情？ 我不是JS编程的最佳人选。
JavaScript ：
$.navigate = function() { // a new link if($anchor != document.location.hash){ // add a preloader $("#content") .empty() .html('
'); // change the anchor saved for next time $anchor = document.location.hash; // get the variables ready for the get var i = $anchor.substring(1).split("/"); var $page = i[0]; var $y = (i[1]) ? i[1] : false; // get the file $.get("callback.php", { x: $page, y: $y }, function(data){ $("#content") .empty() .html(data); },"html"); } }; $(function() { var $anchor = ""; // change from the URI. This dont work. if(document.location.hash){ $.navigate(); } $("a","#nav") .css({backgroundColor:"#f7f7f7"}) .each(function() { $(this).attr("href","#" + $(this).attr("name")); }); setInterval('$.navigate()', 300); });
HTML：
试试ReallysimpleHistory jquery插件。
同上ReallysimpleHistory插件。 我不确定我是否完全理解你的代码，但我会把它分成两个函数：
- 一个做ajax加载（包括显示预加载器）
- 另一个检查当前哈希（来自URL）并调用前一个函数
在你的“$（function（）{…”中你首先调用第二个函数（只需一次）。然后你将链接的click事件与第一个函数绑定。你可以使用$来获取加载函数中的哈希值（本）.attr（ ‘名’）。
快速示例（未测试：P）：
function ajaxLoad() { var anchor; // Check to see if it's being called from an event if ( $(this).length > 0 ) { anchor = $(this).attr('name'); } else { anchor = document.location.hash; } }
您可能想查看jQuery History项目： http ： //www.balupton.com/projects/jquery-history
它比其他function更全面，更容易实现，加上支持，如果太棒了。 还有一个function齐全的AJAX扩展，允许您轻松地将Ajax请求集成到您的状态/哈希，将您的网站转换为function齐全的Web 2.0应用程序： http ： //www.balupton.com/projects/jquery-ajaxy
以下是使用jQuery History的示例（从演示站点获取）：
// Bind a handler for ALL hash/state changes $.History.bind(function(state){ // Update the current element to indicate which state we are now on $current.text('Our current state is: ['+state+']'); // Update the page"s title with our current state on the end document.title = document_title + ' | ' + state; }); // Bind a handler for state: apricots $.History.bind('/apricots',function(state){ // Update Menu updateMenu(state); // Show apricots tab, hide the other tabs $tabs.hide(); $apricots.stop(true,true).fadeIn(200); });
以及jQuery Ajaxy的一个例子（取自演示网站）：
'page': { selector: '.ajaxy-page', matches: /^\/pages\/?/, request: function(){ // Log what is happening window.console.debug('$.Ajaxy.configure.Controllers.page.request', [this,arguments]); // Adjust Menu $menu.children('.active').removeClass('active'); // Hide Content $content.stop(true,true).fadeOut(400); // Return true return true; }, response: function(){ // Prepare var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state; // Log what is happening window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state); // Adjust Menu $menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active'); // Show Content var Action = this; $content.html(data.content).fadeIn(400,function(){ Action.documentReady($content); }); // Return true return true;
如果你想获得querystring params（所以yoursite/page.html#page1?ab=1&a.c=2 ）你可以使用：
$.History.bind(function(state){ var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}} }
因此，请查看这些演示链接以查看它们的运行情况，以及所有安装和使用详细信息。