0

说得尽可能简单。

我有一个

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

还有一秒钟

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

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

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

谢谢！

4

5 回答 5

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

在 codepen 上演示。

于 2014-03-12T02:43:04.657 回答
1

只需使用这个：

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

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

于 2014-03-12T02:46:11.130 回答
0

你可以像这样使用 jQuery：

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

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

于 2014-03-12T02:34:28.853 回答
0

您可以使用 jQuery 切换。例如

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

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

function ButtonToggles(){
   $("#pause").toggle();
   $("#play").toggle();
}
于 2014-03-12T02:46:35.353 回答
0

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

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

小提琴演示

于 2014-03-12T02:57:48.900 回答