如何点击div展示对应内容且不使用默认button元素样式？

我编程经验不多，正在用Neocities做页面，现在页面样子已经满意了，但功能没做出来——想点左边的分类div，右边就显示对应的文本内容。查了资料但不知道怎么动手，而且不想用默认button的样式。目前的CSS和HTML代码如下：

.bio {
  margin: auto;
  height: 100%;
  width: 100%;
  font-family: 'Franklin Gothic';
  display: flex;
}

.bio-cat-holder {
  width: 20%;
  height: auto;
  padding: 20px;
}

.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;
}

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

<div class="bio">
  <div class="bio-cat-holder">
    <div class="bio-cat">GENERAL INFORMATION</div>
    <div class="bio-cat">SKILLS & ABILITIES</div>
    <div class="bio-cat">CATEGORY 3</div>
    <div class="bio-cat">CATEGORY 4</div>
    <div class="bio-cat">CATEGORY 5</div>
    <div class="bio-cat">CATEGORY 6</div>
    <div class="bio-cat">CATEGORY 7</div>
  </div>
  <div class="bio-text-box">
    <div class="general">Blah Blah Blah Biography</div>
    <div id="skills">Blah blah blah skills</div>
  </div>
</div>

实现方案 #

直接按下面的步骤改，不用动你原来的核心样式，只需要补全结构和加一点JS：

1. 完善HTML结构：给每个分类div加data-target属性关联右侧内容ID，给所有内容块统一类名并默认隐藏，只留默认显示的内容。
2. 添加点击交互的JS：绑定点击事件，切换分类的选中状态和内容的显示/隐藏。
3. 可选：加选中样式：让用户清楚当前选中的分类。

修改后的HTML

<div class="bio">
  <div class="bio-cat-holder">
    <div class="bio-cat active" data-target="general">GENERAL INFORMATION</div>
    <div class="bio-cat" data-target="skills">SKILLS & ABILITIES</div>
    <div class="bio-cat" data-target="category3">CATEGORY 3</div>
    <div class="bio-cat" data-target="category4">CATEGORY 4</div>
    <div class="bio-cat" data-target="category5">CATEGORY 5</div>
    <div class="bio-cat" data-target="category6">CATEGORY 6</div>
    <div class="bio-cat" data-target="category7">CATEGORY 7</div>
  </div>
  <div class="bio-text-box">
    <div id="general" class="bio-content active">Blah Blah Blah Biography</div>
    <div id="skills" class="bio-content">Blah blah blah skills</div>
    <div id="category3" class="bio-content">Category 3 content here</div>
    <div id="category4" class="bio-content">Category 4 content here</div>
    <div id="category5" class="bio-content">Category 5 content here</div>
    <div id="category6" class="bio-content">Category 6 content here</div>
    <div id="category7" class="bio-content">Category 7 content here</div>
  </div>
</div>

更新后的CSS

.bio {
  margin: auto;
  height: 100%;
  width: 100%;
  font-family: 'Franklin Gothic';
  display: flex;
}

.bio-cat-holder {
  width: 20%;
  height: auto;
  padding: 20px;
}

.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.active {
  background: #bb2f2f;
  color: #fff;
  border-color: #fff;
}

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

/* 默认隐藏所有内容块 */
.bio-content {
  display: none;
}

/* 显示当前激活的内容 */
.bio-content.active {
  display: block;
}

新增的JavaScript

把这段代码放在HTML的</body>标签前面就行：

// 获取所有分类和内容元素
const categoryItems = document.querySelectorAll('.bio-cat');
const contentItems = document.querySelectorAll('.bio-content');

// 给每个分类绑定点击事件
categoryItems.forEach(item => {
  item.addEventListener('click', () => {
    // 移除所有分类的选中状态
    categoryItems.forEach(cat => cat.classList.remove('active'));
    // 给当前点击的分类加选中状态
    item.classList.add('active');
    
    // 获取要显示的内容ID
    const targetId = item.getAttribute('data-target');
    // 隐藏所有内容
    contentItems.forEach(content => content.classList.remove('active'));
    // 显示目标内容
    document.getElementById(targetId).classList.add('active');
  });
});

内容的提问来源于stack exchange，提问作者Luka -