проблема с одним щелчком и двойным щелчком

Question

У меня есть эти функции, которые выполняются после нажатия ссылки. По какой-то причине, хотя при нажатии ссылки, она не открывается. Вам нужно дважды щелкнуть. После того, как страница была посещена, требуется только один раз щелкнуть ссылку. Как исправить это, поэтому требуется только один клик.

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>

Answer 1

добавить event.preventDefault(); для события щелчка и непосредственно не писать onclick нет необходимости писать функции

$("#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>

Answer 2

Я думаю, вы смешиваете два способа использования событие click с javascript и один из его библиотека jQuery.

Давайте сделаем это сначала с чистого javascript.

JavaScript:

var indexPicWrapper = document.getElementsByClassName("indexPicWrapper"); 
var aboutPicWrapper = document.getElementsByClassName("aboutPicWrapper"); 
var contactPicWrapper = document.getElementsByClassName("contactPicWrapper"); 

function indexClick(){ 
    indexPicWrapper[0].style.display = "block"; 
    aboutPicWrapper[0].style.display = "none"; 
} 

function aboutClick(){ 
    indexPicWrapper[0].style.display = "none"; 
    aboutPicWrapper[0].style.display = "block"; 
    contactPicWrapper[0].style.display = "none"; 
} 

jsFiddle - For javaScript

Теперь, если вы предпочитаете JQuery, то вам не нужно упоминать атрибут OnClick в вашем HTML-элемента, а вы просто можете использовать щелчок событие jQuery.

JQuery:

$("#home").on("click", function() { 
    $('.indexPicWrapper').css('display', 'block'); 
    $('.aboutPicWrapper').css('display', 'none'); 
}); 

$("#about").on("click", function() { 
    $(".indexPicWrapper").css("display", "none") 
    $('.contactPicWrapper').css('display', 'none'); 
    $('.aboutPicWrapper').css('display', 'block'); 
}); 

jsFiddle - For jQuery