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，但是当用户第二次点击时，我似乎无法重新创建包含所有属性的标签。

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

提前致谢？

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

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

<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()。 E.g。

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

Answer 3

此脚本允许您在不添加第三个元素的情况下切换'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

更改HTML元素并恢复

3 个答案: