html+js侧边导航栏，当鼠标按下左边时，右边出现内容，刚进去是默认展示第一个导航栏的内容

可以使用 HTML、CSS 和 JavaScript 来实现这个功能。以下是一个简单的示例代码：

HTML：

<div class="sidebar">
  <ul>
    <li class="active"><a href="#" data-show="content1">导航栏1</a></li>
    <li><a href="#" data-show="content2">导航栏2</a></li>
    <li><a href="#" data-show="content3">导航栏3</a></li>
  </ul>
</div>

<div class="main-content">
  <div id="content1" class="content active">内容1</div>
  <div id="content2" class="content">内容2</div>
  <div id="content3" class="content">内容3</div>
</div>

CSS：

.sidebar {
  width: 200px;
  height: 100%;
  background-color: #f0f0f0;
  position: fixed;
  top: 0;
  left: 0;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar li {
  margin: 0;
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
}

.sidebar li.active {
  background-color: #ddd;
}

.main-content {
  margin-left: 200px;
}

.content {
  display: none;
  padding: 20px;
}

.content.active {
  display: block;
}

JavaScript：

// 获取所有的导航栏和内容元素
const sideBarItems = document.querySelectorAll('.sidebar li');
const contents = document.querySelectorAll('.content');

// 给每个导航栏元素绑定点击事件
sideBarItems.forEach(item => {
  item.addEventListener('click', e => {
    e.preventDefault();

    // 移除所有导航栏元素的 active 类名
    sideBarItems.forEach(i => i.classList.remove('active'));
    // 给当前导航栏元素添加 active 类名
    item.classList.add('active');

    // 隐藏所有内容元素
    contents.forEach(content => content.classList.remove('active'));
    // 获取要展示的内容元素的 ID
    const contentId = item.querySelector('a').getAttribute('data-show');
    // 显示要展示的内容元素
    document.getElementById(contentId).classList.add('active');
  });
});

// 默认展示第一个导航栏的内容
sideBarItems[0].click();

上面的代码实现了一个简单的侧边导航栏，当鼠标按下导航栏时，右边会展示相应的内容。默认展示第一个导航栏的内容。你可以根据需求修改样式和代码。