如何在点击时显示span？

在前端开发中，可以通过以下几种方式实现在点击时显示<span>元素：

使用JavaScript事件监听：可以通过给目标元素添加点击事件监听器，当点击事件触发时，通过修改<span>元素的样式或内容来实现显示。例如：

<button onclick="showSpan()">点击显示<span id="mySpan" style="display: none;">这是一个<span>元素</span></span></button>

<script>
function showSpan() {
  var span = document.getElementById("mySpan");
  span.style.display = "inline"; // 修改样式为显示
}
</script>

使用CSS伪类选择器:target：可以通过在目标<span>元素的父元素中添加锚点，并使用CSS的:target伪类选择器来控制显示。例如：

<a href="#mySpan">点击显示</a>
<span id="mySpan" style="display: none;">这是一个<span>元素</span></span>

<style>
#mySpan:target {
  display: inline; // 修改样式为显示
}
</style>

使用jQuery库：如果项目中已经引入了jQuery库，可以使用其提供的事件绑定和样式操作方法来实现。例如：

<button id="myButton">点击显示</button>
<span id="mySpan" style="display: none;">这是一个<span>元素</span></span>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#myButton").click(function() {
  $("#mySpan").show(); // 修改样式为显示
});
</script>

以上是三种常见的实现方式，根据具体项目需求和技术栈选择适合的方法。