Javascript 单击和双击发布

我有这些函数，单击链接后执行。但由于某些原因，当点击链接时，它不会打开。你必须双击。访问页面后，只需单击一次链接。如何修复此问题，使其只需单击一次

函数indexClick（）{
$（“#主页”）。在（“单击”，函数（）{
$（'.indexPicWrapper'）.css（'display'，'block'）；
$（'.aboutPicWrapper'）.css（'display'，'none'）；
})
}
函数aboutClick（）{
$（“#关于”）。在（“单击”，函数（）{
$（“.indexPicWrapper”）.css（“显示”、“无”）
$（'.contactPicWrapper'）.css（'display'，'none'）；
$（'.aboutPicWrapper'）.css（'display'，'block'）；
})
}

nav{
高度：50px；
背景色：#eaeaea；
线高：50px；
文本对齐：居中；
}
.indexPicWrapper{
最小高度：100%；
身高：100%；
宽度：100%；
溢出y：隐藏；
背景#FFA10D；
位置：绝对位置；
}
.aboutPicWrapper{
显示：无；
位置：绝对位置；
身高：100%；
宽度：100%；
溢出y：隐藏；
背景色：#FF510D；
}

东西。。。
关于

添加

事件.preventDefault（）

用于单击事件并直接写入

onclick

无需写入函数

$（“#主页”）。在（“单击”）上，函数（事件）{
event.preventDefault（）；
$（'.indexPicWrapper'）.css（'display'，'block'）；
$（'.aboutPicWrapper'）.css（'display'，'none'）；
})
$（“#关于”）。在（“单击”）上，函数（事件）{
event.preventDefault（）
$（“.indexPicWrapper”）.css（“显示”、“无”）
$（'.contactPicWrapper'）.css（'display'，'none'）；
$（'.aboutPicWrapper'）.css（'display'，'block'）；
})

nav{
高度：50px；
背景色：#eaeaea；
线高：50px；
文本对齐：居中；
}
.indexPicWrapper{
最小高度：100%；
身高：100%；
宽度：100%；
溢出y：隐藏；
背景#FFA10D；
位置：绝对位置；
}
.aboutPicWrapper{
显示：无；
位置：绝对位置；
身高：100%；
宽度：100%；
溢出y：隐藏；
背景色：#FF510D；
}

东西。。。
关于

我猜您混淆了两种方法来使用javascript中的click事件及其库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";
}

现在，如果您更喜欢jQuery，那么您不需要在HTML元素中提到onclick属性，只需使用jQuery的click事件即可

jQuery:

---

添加

返回true

到事件侦听器的末尾，这将使链接执行其默认行为。“…如果您更喜欢jQuery，那么您不需要将onclick属性附加到HTML元素中”

onclick

属性对于JavaScript或其任何库来说几乎是不需要的，只要有替代的（更好的）属性识别特定元素的方法。

$("#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');
});