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

您提到的功能通常是指网页上的选项卡式界面，这是一种常见的用户界面设计模式，用于在有限的空间内展示多个页面或内容块，同时保持界面的整洁和用户的操作便捷性。

基础概念

选项卡式界面允许用户通过点击不同的标签来切换查看不同的内容区域。每个选项卡通常对应一个独立的内容面板，用户在点击一个选项卡时，只有该选项卡对应的内容面板会被显示，其他选项卡的内容则被隐藏。

类型

静态选项卡：内容在页面加载时就确定，不会随用户交互改变。
动态选项卡：内容可以根据用户的操作或后端数据的变化而动态更新。

应用场景

仪表盘：如数据分析、性能监控等。
设置页面：软件或应用的配置选项。
产品展示：电商网站的产品分类浏览。
文档编辑器：不同文档或文档的不同部分的切换。

实现示例（前端开发）

以下是一个简单的HTML和JavaScript示例，展示如何实现点击选项卡切换内容的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabbed Interface Example</title>
<style>
.tab-content { display: none; }
.tab-content.active { display: block; }
</style>
</head>
<body>

<div class="tabs">
  <button class="tab-button active" data-tab="tab1">Tab 1</button>
  <button class="tab-button" data-tab="tab2">Tab 2</button>
  <button class="tab-button" data-tab="tab3">Tab 3</button>
</div>

<div id="tab1" class="tab-content active">
  <h2>Content for Tab 1</h2>
  <p>This is the content for tab 1.</p>
</div>
<div id="tab2" class="tab-content">
  <h2>Content for Tab 2</h2>
  <p>This is the content for tab 2.</p>
</div>
<div id="tab3" class="tab-content">
  <h2>Content for Tab 3</h2>
  <p>This is the content for tab 3.</p>
</div>

<script>
document.querySelectorAll('.tab-button').forEach(button => {
  button.addEventListener('click', () => {
    const targetTab = button.getAttribute('data-tab');
    document.querySelectorAll('.tab-content').forEach(content => {
      content.classList.remove('active');
    });
    document.getElementById(targetTab).classList.add('active');
    document.querySelectorAll('.tab-button').forEach(btn => {
      btn.classList.remove('active');
    });
    button.classList.add('active');
  });
});
</script>

</body>
</html>