Question

我在snipets中看到了一个单页网站。

当我转到链接/ #xx时，我想显示相关页面（div）。例如，当我写地址/＃about about地址栏并输入时，我希望Jquery显示about div，因为我点击了导航栏中的about按钮。我怎样才能做到这一点？

$(document).ready(function() {


  $("#home-link").click(function() {

    $(".box").hide();
    $("#home").fadeIn();
    $(".navc").removeClass("active-link");
    $(".navc").addClass("nav-link");
    $(this).removeClass("nav-link");
    $(this).addClass("active-link");
  });

  $("#about-link").click(function() {

    $(".box").hide();
    $("#about").fadeIn();
    $(".navc").removeClass("active-link");
    $(".navc").addClass("nav-link");
    $(this).removeClass("nav-link");
    $(this).addClass("active-link");
  });

  $("#cv-link").click(function() {

    $(".box").hide();
    $("#cv").fadeIn();
    $(".navc").removeClass("active-link");
    $(".navc").addClass("nav-link");
    $(this).removeClass("nav-link");
    $(this).addClass("active-link");
  });

  $("#projects-link").click(function() {

    $(".box").hide();
    $("#projects").fadeIn();
    $(".navc").removeClass("active-link");
    $(".navc").addClass("nav-link");
    $(this).removeClass("nav-link");
    $(this).addClass("active-link");
  });

  $("#contact-link").click(function() {

    $(".box").hide();
    $("#contact").fadeIn();
    $(".navc").removeClass("active-link");
    $(".navc").addClass("nav-link");
    $(this).removeClass("nav-link");
    $(this).addClass("active-link");
  });






});

@charset "utf-8";

/* CSS Document */

body {
  background-color: #ABABAB;
}
.navbar {
  background-color: #3E3E3E;
  padding-top: 0px;
  min-height: 0 !important;
  padding-top: 0.7em;
  padding-bottom: 0.3em;
  border-radius: 0;
  border-bottom: medium solid #991F00;
}
.navul li {
  display: inline;
  //*padding-right:5%;*/
}
.nav-link {
  cursor: pointer;
  text-decoration: none;
  padding-bottom: 1em;
  padding-top: 1em;
  padding-right: 2%;
  padding-left: 2%;
  color: #CCCCCC;
}
.nav-link:hover {
  background-color: #989898;
  text-decoration: none;
  padding-bottom: 1em;
  padding-top: 1em;
  padding-right: 2%;
  padding-left: 2%;
  color: black;
}
.active-link {
  background-color: #989898;
  text-decoration: none;
  padding-bottom: 1em;
  padding-top: 1em;
  padding-right: 2%;
  padding-left: 2%;
  color: black;
}
#home {
  background-color: white;
  box-shadow: 2px 2px 2px gray;
  min-height: 400px;
}
#about {
  background-color: white;
  box-shadow: 2px 2px 2px gray;
  min-height: 400px;
  display: none;
}
#cv {
  background-color: white;
  box-shadow: 2px 2px 2px gray;
  min-height: 400px;
  display: none;
}
#projects {
  background-color: white;
  box-shadow: 2px 2px 2px gray;
  min-height: 400px;
  display: none;
}
#contact {
  background-color: white;
  box-shadow: 2px 2px 2px gray;
  min-height: 400px;
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <!--BOOTSTRAP CSS-->
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="main.css" rel="stylesheet">

  <!--BOOTSTRAP JS-->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

  <!--JQUERY JS-->
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

  <!--Main JS-->
  <script src="mainjs.js"></script>

  <title></title>
</head>

<body>

  <div class="container-fluid">

    <div class="row navbar">
      <ul class="navul">
        <li><a id="home-link" class="nav-link navc" href="#home">Ana Sayfa</a>
        </li>
        <li><a id="about-link" class="nav-link navc" href="#about">Hakkımda</a>
        </li>
        <li><a id="cv-link" class="nav-link navc" href="#cv">CV</a>
        </li>
        <li><a id="projects-link" class="nav-link navc" href="#projects">Projeler</a>
        </li>
        <li><a id="contact-link" class="nav-link navc" href="#contact">İletişim</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-9 box" id="home">.
        <br>
        <br>home
        <br>
        <br>
      </div>
      <div class="col-md-9 box" id="about">.
        <br>
        <br>about
        <br>
        <br>
      </div>
      <div class="col-md-9 box" id="cv">.
        <br>
        <br>
        <br>cv
        <br>
      </div>
      <div class="col-md-9 box" id="projects">.
        <br>
        <br>projects
        <br>
        <br>
      </div>
      <div class="col-md-9 box" id="contact">.
        <br>
        <br>
        <br>contact
        <br>
      </div>
    </div>

  </div>



</body>

</html>

Answer 1

在事件

中添加window.location.hash

 $("#home-link").click(function() {

    $(".box").hide();
    $("#home").fadeIn();
    $(".navc").removeClass("active-link");
    $(".navc").addClass("nav-link");
    $(this).removeClass("nav-link");
    $(this).addClass("active-link");
    window.location.hash = "#home";
  });

Answer 2

DEMO：http://jsfiddle.net/09mj1nc0/1/

function showPage() {
    // Grab the current hash value
    var page = location.hash;

    // Check the div exists first
    if ($(page).length) {
        // Check if already showing!
        if ($(page).is(':hidden')) {
            // Hide all the content divs
            $(".row > div").stop().fadeOut();
            //Show the relevant page
            $(page).stop().fadeIn();
        }
    }
};

// When the hash changes (handles anchor click events)
$(window).on('hashchange', function () {
    showPage();
});

// Page load
showPage();

如何重定向到jquery函数

2 个答案: