Переключить видимость между двумя HREF при нажатии на одну из них?

Question

Проще говоря, как можно проще.

у меня есть такой

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

и второй

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

Сначала я хочу, чтобы PAUSE была видимой, но когда она нажата, она исчезает, и PLAY становится видимой, и так далее, и так далее (тумблер)...

Именно классы tubular-pause и tubular-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";
  }
}

Демо на коде.

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" ).click(function(){
  ButtonToggles();
});

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

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

Answer 4

Вы можете использовать jQuery следующим образом:

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

Извините, если это не работает, я все еще начинающий...

Answer 5

Ты можешь использовать hide() скрыть #Play anchor by default and use .toggle() to toggle between show and hide between two anchors:

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

Скрипка Демо