我遵循了你正在做的事情，这是我最终得到的代码。根据我的理解，我认为这在某种程度上是在做你想要的事情。所以这里是我做的总结：

• 我为每个按钮添加了ID（div）
• 为每个类别文本添加了.bio-text类
• 添加了一个JS函数，为每个“bio-cat”元素添加一个click事件监听器。默认情况下，类别文本的显示设置为none。当点击时，它会隐藏当前并显示来自所选按钮（div）的类别文本。
• 增加了CSS悬停效果，并改变光标指针时，它是点击

const catDivs = document.querySelectorAll('.bio-cat');
const textDivs = document.querySelectorAll('.bio-text');

for (let i = 0; i < catDivs.length; i++) {
  catDivs[i].addEventListener('click', function() {
    const visibleText = document.querySelector('.bio-text[style="display: block;"]');
    if (visibleText) {
      visibleText.style.display = 'none';
    }
    textDivs[i].style.display = 'block';
  });
}

.bio-text {
  display: none;
}

.bio-cat {
  background: #9c2f2f;
  color: #bbbbbb;
  border: 2px solid #bbbbbb;
  height: 30px;
  width: 100%;
  font-family: 'VT323';
  font-size: 30px;
  padding-top: 4px;
  text-align: center;
  padding-bottom: 4px;
  margin-top: 10px;
  margin-left: 2%;
  margin-bottom: 1%;
  margin-right: 20px;
  float: left;
  cursor: pointer;
}

.bio-cat:hover {
  background: #bbbbbb;
  color: #9c2f2f;
}

.bio-text-box {
  height: auto;
  border: 2px solid #bbbbbb;
  float: right;
  margin: 10px;
  flex: 1;
  padding: 15px;
}

<div class="bio-cat-holder">
  <div class="bio-cat" id="general-info-btn">GENERAL INFORMATION</div>
  <div class="bio-cat" id="skills-btn">SKILLS & ABILITIES</div>
  <div class="bio-cat" id="cat3-btn">CATEGORY 3</div>
  <div class="bio-cat" id="cat4-btn">CATEGORY 4</div>
  <div class="bio-cat" id="cat5-btn">CATEGORY 5</div>
  <div class="bio-cat" id="cat6-btn">CATEGORY 6</div>
  <div class="bio-cat" id="cat7-btn">CATEGORY 7</div>
</div>

<div class="bio-text-box">
  <div class="bio-text" id="general-info">
    Blah Blah Blah Biography
  </div>
  <div class="bio-text" id="skills">
    Blah blah blah skills
  </div>
  <div class="bio-text" id="cat3">
    Category 3 text
  </div>
  <div class="bio-text" id="cat4">
    Category 4 text
  </div>
  <div class="bio-text" id="cat5">
    Category 5 text
  </div>
  <div class="bio-text" id="cat6">
    Category 6 text
  </div>
  <div class="bio-text" id="cat7">
    Category 7 text
  </div>
</div>

为此，您需要添加javascript，单击event listner。

<button id="myButton">Click me</button>
<div id="myDiv">Original content</div>

<script>
    const button = document.getElementById("myButton");
    const div = document.getElementById("myDiv");
    
    button.addEventListener("click", () => {
      div.textContent = "New content";
    });
</script>

对于你的情况，可以这样做，

<div id="cat1" class="bio-cat">GENERAL INFORMATION</div>
<div id="cat2" class="bio-cat">SKILLS & ABILITIES</div>
<div id="cat3" class="bio-cat">CATEGORY 3</div>
<div id="general" class="general">
    Blah Blah Blah Biography
</div>

<script>
    const div1 = document.getElementById("cat1");
    const div2 = document.getElementById("cat2");
    const div3 = document.getElementById("cat3");
    const div = document.getElementById("general");
    
    div1.addEventListener("click", () => {
      div.textContent = "Div 1 was clicked";
    });
    
    div2.addEventListener("click", () => {
      div.textContent = "Div 2 was clicked";
    });
    
    div3.addEventListener("click", () => {
      div.textContent = "Div 3 was clicked";
    });
</script>

检查我是如何在javascript中使用ID的的。如果你需要减少代码，你可以使用jquery库或foreach循环。