更改 H2 上联系表单的文本

change text on h2 for contact form

本文关键字：文本 表单 联系 H2 更改      更新时间：2023-09-26

您好，我正在制作一个带有一个联系表单的网站，但相同的联系表单有 2 个链接，问题是如何更改联系表单上的 h2 标签。我发现如何更改它效果很好，但我希望这段代码仅适用于一个链接 exp。 这是代码

document.getElementById("h2id").innerHTML = "new text";
<a href="#" id="link1">link1</a>
<a href="#" id="link2">link2</a>
当我单击链接2时，我希望在新文本上更改

联系表单h2，但仅在链接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>

使用纯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 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，那么我会使用"onclick"事件。看看我的例子。

相关文章：