Question

我点击链接后会执行这些功能。出于某种原因，虽然链接被点击一旦它没有打开。你必须双击。访问页面后，只需要点击一次链接。如何解决此问题，只需点击一下即可。

＆＃13;

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');
  })
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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来实现click事件。

让我们先使用纯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，那么您不需要在HTML元素中提及onclick属性，而只需使用jQuery的click事件。

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

单击并双击问题

2 个答案: