单击其中一个时切换两个 A HREF 之间的可见性？答案

【问题标题】：Toggle visibility between two A HREF when clicking one of them?单击其中一个时切换两个 A HREF 之间的可见性？
【发布时间】：2014-03-12 02:29:58
【问题描述】：

说得尽可能简单。

我有一个

<a href="#" id="PAUSE" class="tubular-pause">Pause</a>

一秒钟

<a href="#" id="PLAY" class="tubular-play">Play</a>

我只希望 PAUSE 一开始可见，但一旦点击它就会消失，PLAY 变得可见，依此类推，依此类推（切换）...

tubular-pause 和 tubular-play 类是视频实际暂停和播放的触发器。因此，点击的动作需要保持完整，并且发生在我猜的“切换”之前。

谢谢！

【问题讨论】：

@AmitJoki 刚刚编辑，请再看一遍。

标签： javascript jquery html css tubular

【解决方案1】：

如果你想在没有 jquery 的情况下这样做，这很容易：

function onButtonClick () {
  var playButton = document.getElementById("play");
  var pauseButton = document.getElementById("pause");

  if (pauseButton.style.display == "none") {
    pauseButton.style.display = "block";
    playButton.style.display = "none";
  } else {
    playButton.style.display = "block";
    pauseButton.style.display = "none";
  }
}

Demo on codepen.

【讨论】：

谢谢！单击时的动作仍然存在。不过，我从“块”改为“内联”。

【解决方案2】：

就用这个吧：

$('#PLAY').hide();
$('#PAUSE').click(function () {
    $(this).hide();
    $('#PLAY').show('fade');
});
$('#PLAY').click(function () {
    $(this).hide();
    $('#PAUSE').show('fade');
});

演示：http://jsfiddle.net/fDmLR/

【讨论】：

【解决方案3】：

你可以像这样使用 jQuery：

$("#play").onlclick(function(){
   $("#play").fadeOut(0);
   $("#pause").fadeIn(0);
});
$("#pause").onlclick(function(){
   $("#pause").fadeOut(0);
   $("#play").fadeIn(0);
});

对不起，如果它不起作用，我还是初学者......

【讨论】：

【解决方案4】：

您可以使用 jQuery 切换。例如

$( "#play" ).click(function(){
  ButtonToggles();
});

 $( "#pause" ).click(function(){
   ButtonToggles();
 });

function ButtonToggles(){
   $("#pause").toggle();
   $("#play").toggle();
}

【讨论】：

【解决方案5】：

您可以默认使用hide() 隐藏#Play 锚点，并使用.toggle() 在两个锚点之间切换显示和隐藏：

$('#PLAY').hide();
$('#PLAY, #PAUSE').click(function () {
    $('#PLAY, #PAUSE').toggle();
});

Fiddle Demo

【讨论】：