css 左侧导航栏右侧显示内容

在网页设计与开发过程中，左侧导航栏右侧显示内容的布局是经常使用的一种风格。这种布局风格可以使得网站的结构更加清晰，让用户更加容易找到需要的信息。

<div class="container">
  <div class="left-nav">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">新闻</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </div>
  <div class="content">
    <p>这里是首页内容。</p>
  </div>
</div>

css 左侧导航栏右侧显示内容

上述代码中，我们首先定义了一个容器 .container，其中左侧导航栏使用 .left-nav 定义，右侧显示内容则使用 .content 定义。在左侧导航栏中，我们使用了无序列表 ul，并在其中添加了一些导航链接。在右侧内容 .content 中，我们可以添加任何我们想要显示的内容，例如文章、图片、视频等等。

为了使得左侧导航栏能够实现点击切换右侧内容的功能，我们可以使用 jQuery 或者纯 JavaScript 来实现这个效果。

// jQuery 实现方式
$(".left-nav li").click(function() {
  var index = $(this).index();
  $(".content p").eq(index).show().siblings().hide();
});

// 纯 JavaScript 实现方式
var navList = document.querySelectorAll(".left-nav li");
var contentList = document.querySelectorAll(".content p");

for(var i=0; i上述代码演示了两种实现方式，分别使用了 jQuery 和纯 JavaScript。我们在左侧导航栏 li 的 click 事件中，通过获取当前点击 li 的 index 值，然后对右侧显示的内容进行切换。

总之，左侧导航栏右侧显示内容的布局方式十分常见，使用起来也很简单。我们可以灵活运用 CSS 和 JavaScript 实现各种功能，让网站的结构更加清晰，用户更加易于使用。

css 左侧导航栏右侧显示内容

相关文章