html点击左侧导航栏切换右侧内容

在HTML中，可以通过使用JavaScript来实现点击左侧导航栏切换右侧内容的效果。

首先，在HTML中创建一个包含左侧导航栏和右侧内容的布局结构。可以使用<ul>标签来创建导航栏，并为每个导航项添加一个唯一的ID，以便在JavaScript中使用。右侧内容可以使用<div>标签来创建，每个内容块也可以添加一个唯一的ID作为标识。

接下来，在JavaScript中使用事件监听器以及一些DOM操作来实现点击导航项切换内容的功能。可以使用getElementById()方法来获取导航项和内容块的引用，然后使用style.display属性来控制内容的显示与隐藏。当某个导航项被点击时，需要将其它导航项的内容隐藏，并且显示与之对应的内容块。

示例代码如下：

HTML部分：

<ul>
  <li id="nav1">导航项1</li>
  <li id="nav2">导航项2</li>
  <li id="nav3">导航项3</li>
</ul>

<div id="content1">内容1</div>
<div id="content2">内容2</div>
<div id="content3">内容3</div>

JavaScript部分：

// 获取导航项和内容块的引用
var nav1 = document.getElementById("nav1");
var nav2 = document.getElementById("nav2");
var nav3 = document.getElementById("nav3");

var content1 = document.getElementById("content1");
var content2 = document.getElementById("content2");
var content3 = document.getElementById("content3");

// 初始化显示内容1，隐藏内容2和内容3
content1.style.display = "block";
content2.style.display = "none";
content3.style.display = "none";

// 导航项点击事件处理函数
nav1.onclick = function() {
  // 显示内容1，隐藏内容2和内容3
  content1.style.display = "block";
  content2.style.display = "none";
  content3.style.display = "none";
};

nav2.onclick = function() {
  // 显示内容2，隐藏内容1和内容3
  content1.style.display = "none";
  content2.style.display = "block";
  content3.style.display = "none";
};

nav3.onclick = function() {
  // 显示内容3，隐藏内容1和内容2
  content1.style.display = "none";
  content2.style.display = "none";
  content3.style.display = "block";
};

通过以上代码，当点击左侧导航栏的不同项时，右侧内容会自动切换显示。