Question

您好我正在建立一个包含一个联系表单的网站，但相同的联系表单有2个链接，问题是如何更改联系表单上的h2标记。我发现如何改变它的工作原理很棒，但我希望这段代码只能在一个链接exp上工作。这是代码

document.getElementById("h2id").innerHTML = "new text";

<a href="#" id="link1">link1</a>
<a href="#" id="link2">link2</a>

当我点击link2时，我希望在新文本上更改联系表单h2，但只能在link2上更改

联系表单上的默认文本 OneText 点击第二个链接时更改的文本。新文本

Answer 1

<h2 id="h2id">My title</h2>

<a href="#" id="link1" onclick="changeH2Title()">link1</a>
<a href="#" id="link2" onclick="changeBack()">link2</a>

<script>

function changeH2Title() {
    document.getElementById("h2id").innerHTML = "new text";
}

function changeBack() {
    document.getElementById("h2id").innerHTML = "link1";
}

</script>

如果您只是想使用javascript，那么我会使用＆＃34; onclick＆＃34;事件。看看我的例子。

Answer 2

通过设置 onclick 属性

来绑定点击事件处理程序

function change(ele) {
  document.getElementById("h2id").innerHTML = ele.id == 'link2' ? "new text" : "old text";
  // updating content based on clicked element id
}

<h2 id="h2id">old text</h2>

<a href="#" id="link1" onclick="change(this)">link1</a>
<a href="#" id="link2" onclick="change(this)">link2</a>

或使用jQuery使用 click() 事件处理程序

$('#link2,#link1').click(function(e) {
  e.preventDefault();
  // prevent default click event action
  $('#h2id').text(this.id == 'link2' ? "new text" : "old text");
  // change h2 text based on clicked element id
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2 id="h2id">old text</h2>

<a href="#" id="link1">link1</a>
<a href="#" id="link2">link2</a>

Answer 3

使用纯javascript，你可以在下面

    obj=document.getElementById("link2");
    obj.onclick=function(){
      change_txt(document.getElementById("h2id"),"new text");
    };

    obj=document.getElementById("link1");
    obj.onclick=function(){
      change_txt(document.getElementById("h2id"),"old text");
    };
                 
                 
                 
function change_txt(obj,txt){


obj.innerHTML = txt;
}

<h2 id="h2id">old text</h2>
    <a href="#" id="link1" >link1</a>
    <a href="#" id="link2">link2</a>

更改联系表单上的h2文本

3 个答案: