JS实现点击左侧列表右侧内容变化

可以通过监听左侧列表的点击事件来实现右侧内容的变化。具体实现步骤如下：

1. 获取左侧列表的所有项和右侧内容的所有项。
2. 给左侧列表的每个项绑定点击事件，当点击某个项时，获取该项的索引。
3. 根据索引获取右侧内容对应的项，并将其显示出来，同时隐藏其它内容项。

以下是一个示例代码：

HTML代码：

<div class="list">
  <div class="item">列表项1</div>
  <div class="item">列表项2</div>
  <div class="item">列表项3</div>
</div>

<div class="content">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <div class="item">内容3</div>
</div>

JavaScript代码：

var listItems = document.querySelectorAll('.list .item');
var contentItems = document.querySelectorAll('.content .item');

for (var i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener('click', function(e) {
    // 获取点击项的索引
    var index = Array.prototype.indexOf.call(listItems, e.target);
    // 显示对应的内容项
    for (var j = 0; j < contentItems.length; j++) {
      if (j === index) {
        contentItems[j].style.display = 'block';
      } else {
        contentItems[j].style.display = 'none';
      }
    }
  });
}

上面的代码中，首先获取了左侧列表和右侧内容的所有项，并给左侧列表的每个项绑定了点击事件。当点击某个项时，获取该项在列表中的索引，然后根据索引获取右侧内容对应的项，并将其显示出来，同时隐藏其它内容项。