Question

尽可能简单。

我有一个

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

和第二个

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

我首先只想看到 PAUSE ，但是一旦点击它就消失了， PLAY 变得可见，依此类推等等（切换）......

类管状暂停和管状播放这些是实际暂停和播放视频的触发器。因此，点击的动作需要保持原样，并且在我想到的“切换”之前发生。

谢谢！

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

Answer 2

请使用：

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

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

Answer 3

你可以像这样使用jQuery：

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

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

Answer 4

您可以使用jQuery切换。例如

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

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

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

Answer 5

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

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

<强> Fiddle Demo

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

5 个答案: