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

html：

 

   

     
功能区域
     
管护区划
     
防火等级
     
检查站分布
     
设备分布
     
水源分布
   
 
 

   

     

       
This is pageA.
     
     

       
This is pageB.
     
     

       
This is pageC.
     
     

       
This is pageD.
     
     

       
This is pageE.
     
     

      
This is pageF.
     
  

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;
  });
})();

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