直接使用代码

图片素材

无

css代码

 <style>
.tab-nav{height:100px;background: #f6f6f6;text-align: center}
.tab-nav .nav-item{display:inline-block;padding:6px 30px;margin:25px;color:#000;font-size:25px;cursor: pointer;}
.tab-nav .current{color:#fff;background: #dd7c6a;}
.tab-body{display:none;padding:20px 0;font-size:16px}
.body-list:first-child{display: block}
</style>

HTML+JS代码

<div class="container">
  <div class="tab-nav">
    <p class="nav-item current"> 产品特色 </p>
    <p class="nav-item"> 理赔说明 </p>
    <p class="nav-item"> 常见问题 </p>
  </div>


  <div class="tab-body">
    产品特色
  </div>

  <div class="tab-body">
    理赔说明
  </div>

  <div class="tab-body">
    常见问题
  </div>

  <script type="text/javascript">
    $(document).ready(function (e) {
      $(".tab-body").eq(0).show();
      $(".nav-item").click(function () {
        $(".nav-item ").eq($(this).index()).addClass("current").siblings().removeClass("current");
        $(".tab-body").hide().eq($(this).index()).show();
      })
    });
  </script>

  <div class="clear"></div>
</div>