单击和双击问题

Rafael 发表于 Dev

拉斐尔

单击链接后，我将执行这些功能。但是由于某种原因，一旦单击链接就无法打开。您必须双击。访问该页面后，只需要单击一次链接即可。我该如何解决，因此只需单击一下即可。

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>

维托里诺·费尔南德斯

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