更改 HTML 元素并恢复

Question

我有一个包含 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);

它可以将a标签更改为h2，但是当用户第二次点击时，我似乎无法重新创建具有所有属性的a标签。

或者有人知道更好的方法吗？

提前谢谢？

Answer 1

Fiddle Demo

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's text
    $this.hide(); //hide clicked a
});

.insertBefore()

Answer 2

这个脚本让你在不添加第三个元素的情况下切换'h2'和'a'，它只是用'a'元素替换'h2'，并将'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>');
});

小提琴HERE

Answer 3

为什么不使用单独的元素并根据需要隐藏/显示它们？例如

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