iframe怎么实现点击左侧菜单按钮右侧主体内容改变

可以使用 JavaScript 监听左侧菜单按钮的点击事件，然后动态改变 iframe 的 src 属性，实现右侧主体内容的改变。具体实现方法可以参考以下代码：

HTML 代码：

<div>
  <ul>
    <li><a href="#" data-src="page1.html" class="menu-item">菜单1</a></li>
    <li><a href="#" data-src="page2.html" class="menu-item">菜单2</a></li>
    <li><a href="#" data-src="page3.html" class="menu-item">菜单3</a></li>
  </ul>
  <iframe id="main-frame" src="page1.html"></iframe>
</div>

JavaScript 代码：

var menuItems = document.querySelectorAll('.menu-item'); // 获取所有菜单按钮

for (var i = 0; i < menuItems.length; i++) {
  var menuItem = menuItems[i];

  menuItem.addEventListener('click', function(event) {
    event.preventDefault(); // 禁止默认的链接跳转行为

    var src = this.getAttribute('data-src'); // 获取按钮对应的页面链接

    // 动态改变 iframe 的 src 属性
    var mainFrame = document.getElementById('main-frame');
    mainFrame.src = src;
  });
}