用bootstrap4和jquery写一个左右布局的tab切换

可以参考以下代码实现：

HTML代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="pill" href="#tab1">Tab 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#tab2">Tab 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="pill" href="#tab3">Tab 3</a>
        </li>
      </ul>
    </div>
    <div class="col-md-9">
      <div class="tab-content">
        <div class="tab-pane fade show active" id="tab1">
          <h2>Tab 1 Content</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacinia ipsum. Sed euismod, lorem eget mattis sodales, mi lectus pharetra felis, sit amet porttitor sapien odio vel augue. Sed ultrices, est vitae bibendum sollicitudin, lacus justo interdum turpis, sed tincidunt nulla nibh ac tellus. </p>
        </div>
        <div class="tab-pane fade" id="tab2">
          <h2>Tab 2 Content</h2>
          <p>Quisque erat mi, condimentum in dui eget, rutrum vulputate libero. Quisque commodo dui at ex tristique, in ultrices ligula fermentum. Sed varius, sapien id vulputate sagittis, sapien augue consequat nunc, vel pellentesque arcu metus id elit. Nullam malesuada ligula eu risus porttitor, quis tincidunt sapien feugiat. </p>
        </div>
        <div class="tab-pane fade" id="tab3">
          <h2>Tab 3 Content</h2>
          <p>Aliquam magna enim, rhoncus vel malesuada in, tristique eget nulla. Sed euismod mauris vel magna aliquet, vitae bibendum elit auctor. Phasellus ornare, lacus sit amet auctor luctus, urna nisi laoreet justo, at euismod nisl risus nec tellus. Duis finibus efficitur ex, at commodo sem pellentesque eu. </p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS代码：

.nav-pills .nav-link.active {
  background-color: #007bff;
  color: #fff;
}

JS代码：

$(function() {
  $('.nav-pills a').on('shown.bs.tab', function(event) {
    var tabName = event.target.hash;
    $('html, body').animate({
      scrollTop: $(tabName).offset().top
    }, 500);
  });
});

在这个例子中，我们使用了Bootstrap 4的网格系统来实现左右布局，并使用了jQuery和Bootstrap的Tab插件来实现选项卡切换。在CSS中，我们设置了选项卡被选中时的样式。在JS中，我们使用了jQuery的animate()方法来实现选项卡切换后页面滚动到选项卡所在位置的效果。