html+css+javacript怎么实现点击左侧导航栏的链接实现右边界面显示不同的界面

你可以使用 JavaScript 实现这个功能。首先，在 HTML 中，你需要为导航栏和右边的界面分别设置 ID，这样 JavaScript 才能够找到它们。例如：

<div id="sidebar">
  <ul>
    <li><a href="#" onclick="showPage('page1')">Page 1</a></li>
    <li><a href="#" onclick="showPage('page2')">Page 2</a></li>
    <li><a href="#" onclick="showPage('page3')">Page 3</a></li>
  </ul>
</div>

<div id="content">
  <div id="page1" class="page">
    This is page 1.
  </div>
  <div id="page2" class="page">
    This is page 2.
  </div>
  <div id="page3" class="page">
    This is page 3.
  </div>
</div>

在这个例子中，左侧的导航栏有三个链接，点击它们会分别显示右侧的三个页面。注意，每个页面都有一个 ID，并且它们都有一个共同的类名 `page`，这样我们可以用 JavaScript 方便地找到它们。

接下来，在 JavaScript 中，你需要编写一个函数 `showPage`，它会根据传入的参数显示相应的页面。例如：

function showPage(pageId) {
  // 隐藏所有页面
  var pages = document.getElementsByClassName('page');
  for (var i = 0; i < pages.length; i++) {
    pages[i].style.display = 'none';
  }

  // 显示指定的页面
  var page = document.getElementById(pageId);
  page.style.display = 'block';
}

这个函数会先隐藏所有页面，然后根据传入的参数显示指定的页面。你可以在每个导航栏链接的 `onclick` 事件中调用这个函数，例如：

<a href="#" onclick="showPage('page1')">Page 1</a>

这样，当用户点击链接时，就会显示相应的页面了。