var ali = document.querySelectorAll('xiaodaohang a'); var aduanluo = document.querySelectorAll('duanluo div'); //给每一个button都添加点击事件 for (var i = 0; i < ali.length; i++) { //通过给button自定义属性来解决 ali[i].index=i //每个键存储一下 ali[i].onclick = function () { //点击事件的实现？？ this就是点击的button for (var j = 0; j < ali.length; j++) { ali[j].className = ''; aduanluo[j].className = ''; } //再给应该添加的对象添加className this.className = 'active'; aduanluo[this.index].className = 'duanluo1'; }; }修改这段JavaScript代码使它能够通过点击不同的li展示不同的内容

假设 HTML 结构如下：

<ul class="xiaodaohang">
  <li><a href="#">菜单1</a></li>
  <li><a href="#">菜单2</a></li>
  <li><a href="#">菜单3</a></li>
</ul>

<div class="duanluo">
  <div class="duanluo1">内容1</div>
  <div class="duanluo1">内容2</div>
  <div class="duanluo1">内容3</div>
</div>

可以将代码修改如下：

var ali = document.querySelectorAll('.xiaodaohang li a');
var aduanluo = document.querySelectorAll('.duanluo .duanluo1');

for (var i = 0; i < ali.length; i++) {
  ali[i].index = i;
  ali[i].onclick = function () {
    for (var j = 0; j < ali.length; j++) {
      ali[j].classList.remove('active');
      aduanluo[j].classList.remove('active');
    }
    this.classList.add('active');
    aduanluo[this.index].classList.add('active');
  };
}

这样，每次点击不同的菜单项，就会展示相应的内容了。需要注意的是，需要在 CSS 中定义 `.active` 类的样式，以控制被选中的菜单项和对应内容的样式。