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

Question

只想知道当我点击一个按钮时点击显示单词“Phone”将变为“+971235051”

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

有什么暗示吗？我找到了一个切换，但找不到点击显示。

谢谢

Answer 1

你可以使用:focus于此。 检查下面更新的片段...

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

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

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来更改按钮的文本

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

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

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参考 ）：

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

如果你想要一种更可定制的方式，你应该使用JQuery和toggleClass()方法来尝试：

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

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

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

 <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> 

W3C参考

希望它可以帮助:)

Answer 6

\n

\n

\n

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

\n

\n

\n