javascript - 如何使用 jQuery 模拟多页面站点？

Question

我正在处理的站点是单页站点，但我想使用 css/jQuery 模拟多页站点，以便在导航中单击正确的链接时隐藏/显示站点的不同部分。

Here is the code I am currently working with on JSFiddle.

HTML

<header id="top">
 <nav>
  <ul>
   <li> 
    <a href="#about">About</a>
   </li>
   <li>
    <a href="#skills">Skills</a>
   </li>
   <li>
    <a href="#projects">Projects</a>
   </li>
   <li>
    <a href="#contact">Contact</a>
   </li>
  </ul>
 </nav>
</header>

<main role="main" id="main">
 <section id="about">
 </section>
 <section id="skills">
 </section>
 <section id="projects">
 </section>
 <section id="contact">
 </section>
</main>

CSS

.active {
  background: $lightest-blue;
  color: $blue;
}

.hide-section {
  display: none;
}

section {
  height: 1em;
  background: blue;
}

JavaScript

// Create Variables pointing to all Nav links and the About section link.
var siteNav = $("#top li").children();
var aboutLink = siteNav[0];

// Create Variables poingting to all Sections and the About section.
var siteSections = $("#main").children();
var aboutSection = siteSections[0];

// Hide all major sections by adding CSS class.
siteSections.addClass("hide-section");

// Upon document being ready, make user "arrive" at the About section by removing the hide class on it.
// Add active class to About section link.
$(function() {
  $(aboutLink).addClass("active");
  $(aboutSection).removeClass("hide-section");
});

// 1. Capture click on Nav anchor.
$("#top a").click(function() {
  // 1.1 Remove active class from all links.
  siteNav.removeClass("active");
  // 1.2 Add active class to clicked link.
  $(this).addClass("active");
  // 1.3 Identify proper section.
  var hrefLink = $(this).attr("href");
  // 1.4 Hide all other sections.
  siteSections.addClass("hide-section");
  // 1.5 Reveal proper section.

});

Answer 1

对了，等等，您正在尝试在这里重新发明轮子! :)

看看 Jquery 选项卡库:

http://jqueryui.com/tabs/

只需将代码复制到您的站点中， 删除样式表链接就可以了! :D