如何在单击时在同一窗口中显示不同的内容？

在单击时在同一窗口中显示不同的内容，可以通过以下几种方式实现：

使用JavaScript：可以通过在HTML中使用JavaScript编写事件处理函数来实现。首先，给需要单击的元素添加一个唯一的id属性，然后在JavaScript中获取该元素，并为其绑定一个点击事件。在事件处理函数中，可以根据需要动态修改元素的内容或样式，从而实现在同一窗口中显示不同的内容。

示例代码： HTML部分：

<button id="myButton">点击我</button>
<div id="content"></div>

JavaScript部分：

var button = document.getElementById("myButton");
var content = document.getElementById("content");

button.addEventListener("click", function() {
  // 修改内容
  content.innerHTML = "不同的内容";
});

使用jQuery：如果你使用了jQuery库，可以使用其提供的事件绑定方法来实现。与JavaScript方式类似，首先给需要单击的元素添加一个唯一的id属性，然后使用jQuery选择器获取该元素，并使用click方法绑定点击事件。在事件处理函数中，同样可以根据需要动态修改元素的内容或样式。

示例代码： HTML部分：

<button id="myButton">点击我</button>
<div id="content"></div>

JavaScript部分（需要引入jQuery库）：

$("#myButton").click(function() {
  // 修改内容
  $("#content").html("不同的内容");
});

使用Vue.js或React等前端框架：如果你使用了前端框架，如Vue.js或React，可以通过绑定数据和事件来实现在同一窗口中显示不同的内容。首先，在HTML中定义需要单击的元素，并使用框架提供的指令或组件绑定数据和事件。然后，在对应的事件处理函数中，修改数据的值，框架会自动更新相关的视图，从而实现内容的动态变化。

示例代码（使用Vue.js）： HTML部分：

<div id="app">
  <button @click="changeContent">点击我</button>
  <div>{{ content }}</div>
</div>

JavaScript部分（需要引入Vue.js库）：

new Vue({
  el: "#app",
  data: {
    content: ""
  },
  methods: {
    changeContent: function() {
      // 修改内容
      this.content = "不同的内容";
    }
  }
});

以上是几种常见的实现方式，具体选择哪种方式取决于你的项目需求和技术栈。