單擊和雙擊問題

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

我想你有兩種方式來使用混合起來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