Question

当我点击按钮时，只想知道如何点击显示 ＆＃34;电话＆＃34; 将更改为＆＃34; + 971235051＆＃34;

<button type="button" class="btn btn-primary">Phone</button>
<span>+971235051</span>

有任何提示吗？我发现了一个切换，但无法找到点击显示。

三江源

Answer 1

您可以使用:focus。检查下面更新的代码段...

＆＃13;

.num, button:focus .txt  {
  display: none;
}
button:focus .num {
  display: block;
}

＆＃13;

<button type="button" class="btn btn-primary"><span class="txt">Phone</span>
<span class="num">+971235051</span>
</button>

＆＃13;

Answer 2

使用jquery

尝试此操作

$('#btn').on('click', function() {
    if($('#btn').text() != 'Phone') {
        $('#btn').text('Phone');
    } else {
        $('#btn').text('+971235051');        
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button type="button" id="btn" class="btn btn-primary">Phone</button>

这是用javascript

function fns() {
  var elem = document.getElementById("btn");
  if (elem.innerHTML == "Phone") {
    elem.innerHTML = "+971235051";
  } else {
    elem.innerHTML = "Phone";
  }

}

<button type="button" id="btn" onclick="fns()" class="btn btn-primary">Phone</button>

Answer 3

创建一个函数和用户innerHTML来更改按钮的文本

＆＃13;

function changeText(elem) {
  elem.innerHTML = "+971235051"

}

＆＃13;

<button type="button" class="btn btn-primary" onclick="changeText(this)">Phone</button>

＆＃13;

Answer 4

在这里，只是利用JS中的onclick事件处理程序，附加一个自定义函数来执行它并在函数中进行文本更改;）

function myFunction()
{
document.getElementById("toClick").innerHTML = "+971235051";
}

<button onclick="myFunction()" id="toClick">Phone</button>

Answer 5

抱歉，这个答案不在轨道上

也许照看新的HTML 5.1元素：<summary>（这里是MDN reference）：

<details>
  <summary>Phone</summary>
  <p>+971235051</p>
</details>

如果您想要一种更可自定义的方式，您应该使用JQuery和toggleClass()方法进行尝试：

编辑了代码，很乱，对不起^^

＆＃13;

$("button").click(function() {
  $("span").toggleClass("btn_active");
});

＆＃13;

span {
  display: none;
}

.btn_active {
  display: inline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary">Phone</button>
<span>+971235051</span>

＆＃13;

W3C reference

希望它可能有所帮助：）

Answer 6

<button type="button" id="btn" onclick="document.getElementById('btn').innerHTML = '+971235051'" class="btn btn-primary">Phone</button>

如何在css / js中进行点击显示？

6 个答案:

抱歉，这个答案不在轨道上