Javascript的锚导航 [英] Javascript anchor navigation

问题描述

我创造与像使用Facebook和谷歌邮件的定位导航网站。我已完成了工作，但并不完全。当我加载网页的东西，如 #contact 也不会加载它，除非我点击链接它。另外，会有一个更好的，更有效的方式做我在做什么？我不是最好的人用JS编程。

的JavaScript

  $。导航=功能（）{
  //一个新的链接
  如果（$主播！= document.location.hash）{
    //添加preloader
    $（＃内容）
      .empty（）
      html的（'＆LT; P类=对准中心＆GT;＆LT; IMG SRC =资产/图像/ loading.gif/＆GT;＆LT; / P＆GT;'）;
    //改变保存下一次锚
    $锚= document.location.hash;
    //获取变量准备的get
    变种I = $ anchor.substring（1）.split（/）;
    变量$页= I [0];
    变量$ Y =（I [1]）？我[1]：假的;
    //获取文件
    $获得（callback.php，{X：$页，Y：$ Y}，功能（数据）{
      $（＃内容）
        .empty（）
        html的（数据）;
    }，HTML）;
  }
};

$（函数（）{

  变量$锚=;
  //改变从URI。这不工作。
  如果（document.location.hash）{$ .navigate（）; }

  $（一，＃导航）
    的.css（{的backgroundColor：＃f7f7f7}）
    每个（函数（）{
      $（本）.attr（HREF，＃+ $（本）.attr（名字））;
    }）;

  的setInterval（'$导航（），300）;

}）;
 

HTML：

 ＆LT; D​​IV ID =导航＆GT;
  ＆LT; UL类=水平导航＆GT;
    ＆LT;李＆GT;＆LT; A HREF =htt​​p://streetmafia.co.uk/NAME =指数＆GT;首页＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT;李＆GT;＆LT; A HREF =htt​​p://streetmafia.co.uk/aboutNAME =关于＆gt;关于＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT;李＆GT;＆LT; A HREF =htt​​p://streetmafia.co.uk/portfolioNAME =组合＆GT;投资组合＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT;李＆GT;＆LT; A HREF =htt​​p://streetmafia.co.uk/contactNAME =接触与GT;联系与LT; / A＆GT;＆LT; /李＆GT;
  ＆LT; / UL＆GT;
  ＆LT; D​​IV ID =L-导航＆GT;＆LT; / DIV＆GT;
  ＆LT; D​​IV ID =R-导航＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

尝试 ReallysimpleHistory jQuery插件。

I am creating a website with the "anchor navigation" like used with facebook and google mail. I have got it working but not fully. When I load the page with something like #contact it won't load it in unless I click the link for it. Also, would there be a better, more efficient way to do what I am doing? I am not the best person with JS programming.

JavaScript:

$.navigate = function() {
  // a new link
  if($anchor != document.location.hash){
    // add a preloader
    $("#content")
      .empty()
      .html('<p class="align-center"><img src="assets/images/loading.gif" /></p>');
    // 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:

<div id="nav">  
  <ul class="horizontal-nav">
    <li><a href="http://streetmafia.co.uk/" name="index">Home</a></li>
    <li><a href="http://streetmafia.co.uk/about" name="about">About</a></li>
    <li><a href="http://streetmafia.co.uk/portfolio" name="portfolio">Portfolio</a></li>
    <li><a href="http://streetmafia.co.uk/contact" name="contact">Contact</a></li> 
  </ul>
  <div id="l-nav"></div>
  <div id="r-nav"></div>  
</div>

解决方案

Try the ReallysimpleHistory jquery plugin.

这篇关于Javascript的锚导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！