html+js+css实现同一页面中内容的不同切换

html：

 <div class="columnNav">
   <ul class="tabs">
     <li class="active"><a href="#tab1">功能区域</a></li>
     <li><a href="#tab2">管护区划</a></li>
     <li><a href="#tab3">防火等级</a></li>
     <li><a href="#tab4">检查站分布</a></li>
     <li><a href="#tab5">设备分布</a></li>
     <li><a href="#tab6">水源分布</a></li>
   </ul>
 </div>
 <div class="columnContent">
   <div class="c-tab-body">
     <div id="tab1" class="tab_content">
       <h1>This is pageA.</h1>
     </div>
     <div id="tab2" class="tab_content">
       <h1>This is pageB.</h1>
     </div>
     <div id="tab3" class="tab_content">
       <h1>This is pageC.</h1>
     </div>
     <div id="tab4" class="tab_content">
       <h1>This is pageD.</h1>
     </div>
     <div id="tab5" class="tab_content">
       <h1>This is pageE.</h1>
     </div>
     <div id="tab6" class="tab_content">
      <h1>This is pageF.</h1>
     </div>
  </div>
</div>

css：

/* 导航 */
.columnNav{
  height: 0.5375rem;
}
.columnNav ul li{
  display: block;
  float: left;
  font-family: Arial, 苹方, 微软雅黑;
  font-size: 0.225rem;
  font-weight: bolder;
  margin-right: 0.5rem;
  line-height: 0.5375rem;
  background: url(../images/index/linebefor.png) no-repeat center;
}
.columnNav ul li a{
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
}
.columnNav ul li a:hover,.columnNav ul li:hover{
  color: #fff;
  background: url(../images/index/line.png) no-repeat center;
}
.columnNav .active a{
  color: #fff;
}
.columnNav .active{
  background: url(../images/index/line.png) no-repeat center;
}

js：

(function () {
  $(".tab_content").hide();
  $("ul.tabs li:first").addClass("active").show();
  $(".tab_content:first").show();
  $("ul.tabs li").click(function () {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false;
  });
})();

    希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~