使用layui.js和layui.css写，html5点击左侧如侧进行变化,使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果...

要实现这个效果，你需要按照以下步骤进行：

1. 在HTML中创建一个左侧导航栏和右侧内容区域的框架：

<div class="layui-layout layui-layout-admin">
  <!-- 左侧导航栏 -->
  <div class="layui-side layui-bg-black">
    <!-- 左侧导航栏的内容 -->
  </div>
  <!-- 右侧内容区域 -->
  <div class="layui-body">
    <!-- 右侧内容区域的内容 -->
  </div>
</div>

2. 在左侧导航栏中创建一个菜单，然后为每个菜单项添加点击事件：

<div class="layui-side layui-bg-black">
  <div class="layui-side-scroll">
    <ul class="layui-nav layui-nav-tree" lay-filter="test">
      <li class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;">菜单1</a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">子菜单1</a></dd>
          <dd><a href="javascript:;">子菜单2</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item">
        <a href="javascript:;">菜单2</a>
      </li>
    </ul>
  </div>
</div>

3. 在右侧内容区域中创建一个选项卡，并为每个选项卡添加内容：

<div class="layui-body">
  <div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
      <li class="layui-this">选项卡1</li>
      <li>选项卡2</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">
        <p>选项卡1的内容</p>
      </div>
      <div class="layui-tab-item">
        <p>选项卡2的内容</p>
      </div>
    </div>
  </div>
</div>

4. 使用JavaScript为每个菜单项添加点击事件，以切换选项卡：

// 使用layui.use引入模块
layui.use(['element','jquery'], function(){
  var element = layui.element;
  var $ = layui.jquery;

  // 为菜单项添加点击事件
  $('.layui-nav-item').click(function(){
    // 获取菜单项的索引
    var index = $(this).index();

    // 切换选项卡
    element.tabChange('test', index);
  });
});

这样，当用户点击左侧导航栏中的菜单项时，就会切换右侧内容区域中的选项卡，并使右侧选项卡跟随变化。