我已经制作了一个单页网站，如您在代码片段中所见。
当我转到链接/#xx 时，我想显示相关页面 (div)。例如，当我将 path/#about 写入地址栏并输入时，我希望 Jquery 显示关于 div，因为我单击了导航栏中的关于按钮。我怎样才能做到这一点？
$(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>最佳答案
在事件中添加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";
});
关于jquery - 如何重定向到 jquery 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28171009/