Изменить элемент HTML и восстановить

0

У меня есть сайт с 2 ссылками.

Как только пользователь нажимает на ссылку, это должно стать заголовком h2 без ссылки.
Когда пользователь нажимает на вторую ссылку, первые ссылки должны быть восстановлены до своего предыдущего состояния, а вторая ссылка должна стать элементом h2.

Ссылки имеют целью показать новую вкладку, чтобы они не перезагружали страницу.

HTML (не против ссылки href)

<div id="Panel" class="header-panels">
    <a data-linked="#panelImages" href=".../images/#" tabindex="0" class="active">Foto's</a>
    <a data-linked="#panelVideos" href=".../videos/#" tabindex="0">Video's</a>
</div>

Есть ли способ сделать это с помощью javascript/jquery?

Я пробовал такие вещи, как:

var p = $('.header-panels .active');
var a = $('<h2></h2>').append(p.contents());
p.replaceWith(a);

И он работает, чтобы сменить тег на h2, но я не могу воссоздать тег a со всеми атрибутами, когда пользователи нажимают второй раз.

Или кто-нибудь знает лучший подход к этому?

Заранее спасибо?

  • 0
    Требуется ли сделать его <h2> если нет, в jQuery есть две функции: addClass () и removeClass (), которые работают очень хорошо.
  • 0
    Как насчет использования функций «показать / скрыть» в элементе, чтобы переключение ссылки скрывало <a> и показывало <h2> и наоборот?
Показать ещё 1 комментарий
Теги:

3 ответа

1
Лучший ответ

Демо-версия скрипта

var all_a = $('#Panel a'); //cache your selector
var h2 = $('<h2/>').attr('id', 'temp');//created a h2 tag with id temp (just for identification if u need to style it)
all_a.click(function (e) {
    e.preventDefault();//stop default behavior of click if u want
    all_a.show(); //show all a tag inside id Panel
    var $this = $(this); //cache selectore
    h2.text($this.text()).insertBefore($this); //insert h2 before current a tag clicked  and with it text
    $this.hide(); //hide clicked a
});

.insertBefore()

Поделиться
  • 0
    Это мне очень помогает! Спасибо!
0

Этот скрипт позволяет вам переключать "h2" и "a" без добавления третьего элемента, он просто заменяет "h2" на элемент "a" и добавляет все параметры элемента "a" к элементу "h2" в форме данные.

$(document).on('click', '#Panel a', function (e) {
    e.preventDefault();
    $this = $(this);

    var $h2Elem = $this.parents('#Panel').find('h2');
    console.log($h2Elem);
    $h2Elem.each(function (index, item) {
        var linked = $(item).data('linked'),
            href = $(item).data('href'),
            tabindex = $(item).data('tabindex'),
            text = $(item).text();
        $(item).replaceWith('<a data-liked="' + linked + '" href="' + href + '" tabindex="' + tabindex + '">' + text + '<a>');
    });

    var linked = $(this).data('linked'),
        href = $(this).attr('href'),
        tabindex = $(this).attr('tabindex'),
        text = $(this).text();
    $this.replaceWith('<h2 data-liked="' + linked + '" data-href="' + href + '" data-tabindex="' + tabindex + '">' + text + '<h2>');
});

СКАЧАТЬ ЗДЕСЬ

Поделиться
  • 0
    Спасибо за помощь. Этот код, кажется, работает, но когда вы проверяете элемент, он генерирует много бесполезного HTML, когда вы нажимаете пару раз. Так что это не совсем оптимально.
0

почему бы вам не использовать отдельные элементы и не скрывать/показывать их по мере необходимости? Например

<div id="Panel" class="header-panels">
  <a data-linked="#panelImages" href=".../images/#" tabindex="0" class="active"     id="fotolink">Foto's</a><h2 id="foto" style="display: none;">Foto's</h2>
  <a data-linked="#panelVideos" href=".../videos/#" tabindex="0"     id="videolink">Video's</a><h2 id="video" style="display: none;">Video's</h2>
</div>

<script type="text/javascript">
  $("#fotolink").on("click", function (e) {
    $("#fotolink").hide();
    $("#foto").show();
    $("#videolink").show();
    $("#video").hide();
    //e.preventDefault();
  });
  $("#videolink").on("click", function (e) {
    $("#fotolink").show();
    $("#foto").hide();
    $("#videolink").hide();
    $("#video").show();
    //e.preventDefault();
  });
</script>

РЕДАКТИРОВАТЬ:

В свете вашего комментария я бы сохранил ссылку на старый элемент привязки и использовал detach(). Например

  var oldLink;
  function removeH2() {
    var h2 = $("#textheading");
    if(h2) {
      $(oldLink).insertBefore(h2);
      $(h2).remove();
    }
  }
  function toText(a) {
    oldLink = a;
    var h2 = $('<h2 id="textheading">' + $(a).text() + '</h2>');
    $(h2).insertAfter(a);
    $(a).detach();
  }
  $("#fotolink").on("click", function (e) {
      //e.preventDefault();
      removeH2();
      toText(e.target);
  });
  $("#videolink").on("click", function (e) {
      //e.preventDefault();
      removeH2();
      toText(e.target);
  });
Поделиться
  • 0
    Разделение элементов является опцией, однако HTML-код динамически генерируется в C #. Вот почему я хотел бы, чтобы решение изменило его с помощью javascript / jquery, не касаясь HTML. Но это хорошее решение для резервного копирования.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню