以下是一个使用HTML、CSS和JavaScript的示例，演示了如何在抽屉中显示标签，并在切换标签时不发生抽屉的切换。

HTML:

  

    标签1
    标签2
    标签3
  
  

    
标签1内容
    
这是标签1的内容。
  
  

    
标签2内容
    
这是标签2的内容。
  
  

    
标签3内容
    
这是标签3的内容。
  

CSS:

.drawer {
  position: relative;
  background-color: #f1f1f1;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.tabs {
  display: flex;
}

.tab {
  flex: 1;
  padding: 10px;
  background-color: #ccc;
  border: none;
  outline: none;
  cursor: pointer;
}

.tabContent {
  display: none;
  padding: 10px;
}

.tabContent.show {
  display: block;
}

JavaScript:

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

  // 隐藏所有标签内容
  tabContent = document.getElementsByClassName("tabContent");
  for (i = 0; i < tabContent.length; i++) {
    tabContent[i].style.display = "none";
  }

  // 显示当前标签的内容
  document.getElementById(tabName).style.display = "block";
}

在这个示例中，我们使用了一个具有固定宽度和高度的抽屉容器，并使用CSS将其样式为灰色。在抽屉中，有一个包含标签按钮的