Vote count:
0
I've made a one page site as you see in the snipets.
I want to show the relevant page (div), when I go to the link /#xx. For example, when I write path/#about to address bar, and enter, I want Jquery to show the about div, as I clicked the about button in the navbar. How can I do that?
Thanks in advance.
$(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://ift.tt/14Tc4tE" rel="stylesheet">
<link href="main.css" rel="stylesheet">
<!--BOOTSTRAP JS-->
<script src="http://ift.tt/1tSH0Pd"></script>
<!--JQUERY JS-->
<script src="http://ift.tt/13wBVXk"></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>
asked 1 min ago
How to redirect to a jquery function
Aucun commentaire:
Enregistrer un commentaire