I have these functions that execute once a link is clicked. For some reason though when the link is clicked once it doesn't open. You have to double-click. After the page has been visited it only requires the link to be clicked once. How do I fix this so it only requires one click.
function indexClick() {
$("#home").on("click", function() {
$('.indexPicWrapper').css('display', 'block');
$('.aboutPicWrapper').css('display', 'none');
})
}
function aboutClick() {
$("#about").on("click", function() {
$(".indexPicWrapper").css("display", "none")
$('.contactPicWrapper').css('display', 'none');
$('.aboutPicWrapper').css('display', 'block');
})
}nav {
height: 50px;
background-color: #eaeaea;
line-height: 50px;
text-align: center;
}
.indexPicWrapper {
min-height: 100%;
height: 100%;
width: 100%;
overflow-y: hidden;
background: #FFA10D;
position: absolute;
}
.aboutPicWrapper {
display: none;
position: absolute;
height: 100%;
width: 100%;
overflow-y: hidden;
background-color: #FF510D;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<a id="home" onclick="indexClick()" class="indexLink" href="#">Home</a>
<a id="about" class="aboutLink" onclick="aboutClick()" href="#">About</a>
</nav>
<div class="indexPicWrapper">
<h1>Things...</h1>
</div>
<div class="aboutPicWrapper">
<h1>About...</h1>
</div>add event.preventDefault(); for click event and directly write onclick no need to write function
$("#home").on("click", function(event) {
event.preventDefault();
$('.indexPicWrapper').css('display', 'block');
$('.aboutPicWrapper').css('display', 'none');
})
$("#about").on("click", function(event) {
event.preventDefault()
$(".indexPicWrapper").css("display", "none")
$('.contactPicWrapper').css('display', 'none');
$('.aboutPicWrapper').css('display', 'block');
})nav {
height: 50px;
background-color: #eaeaea;
line-height: 50px;
text-align: center;
}
.indexPicWrapper {
min-height: 100%;
height: 100%;
width: 100%;
overflow-y: hidden;
background: #FFA10D;
position: absolute;
}
.aboutPicWrapper {
display: none;
position: absolute;
height: 100%;
width: 100%;
overflow-y: hidden;
background-color: #FF510D;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<a id="home" class="indexLink" href="#">Home</a>
<a id="about" class="aboutLink" href="#">About</a>
</nav>
<div class="indexPicWrapper">
<h1>Things...</h1>
</div>
<div class="aboutPicWrapper">
<h1>About...</h1>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments