一次应打开一个选项卡，当单击另一个选项卡时，其选项卡应显示在目标上

根据提供的问答内容，我们可以回答如下：

该功能可以通过使用HTML、CSS和JavaScript来实现，以下是一个实现该功能的基本思路：

HTML结构：使用<ul>和<li>元素创建选项卡的结构。每个<li>元素代表一个选项卡，点击时切换显示。

<ul class="tabs">
  <li onclick="openTab(event, 'tab1')">选项卡1</li>
  <li onclick="openTab(event, 'tab2')">选项卡2</li>
  <li onclick="openTab(event, 'tab3')">选项卡3</li>
</ul>
<div id="tab1" class="tab-content">选项卡1的内容</div>
<div id="tab2" class="tab-content">选项卡2的内容</div>
<div id="tab3" class="tab-content">选项卡3的内容</div>

CSS样式：为选项卡和选项卡内容添加样式，使其呈现出合适的外观。

.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tabs li {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}

.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}

.tab-content.show {
  display: block;
}

JavaScript函数：编写JavaScript函数来实现选项卡的切换显示功能。

function openTab(event, tabName) {
  var i, tabContent;

  // 隐藏所有选项卡内容
  tabContent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabContent.length; i++) {
    tabContent[i].style.display = "none";
  }

  // 取消所有选项卡的选中状态
  var tabs = document.getElementsByClassName("tabs")[0].getElementsByTagName("li");
  for (i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove("active");
  }

  // 显示目标选项卡内容，并将目标选项卡设置为选中状态
  document.getElementById(tabName).style.display = "block";
  event.currentTarget.classList.add("active");
}

以上代码将实现一个简单的选项卡功能。点击不同的选项卡时，对应的内容将显示在目标位置上。

应用场景：