利用a标签锚点定位实现切换页面的部分内容

        最近在做一个数据可视化大屏的作业，其中需要实现点击不同的按钮，大屏中间内容呈现不同的数据分析图表，页面其他部分不发生改变。之前考虑过复制多个页面然后改变中间的页面，但是这样会导致文件冗余，而且由于静态文件放在不同的文件夹，所以每个复制的页面都要调整文件路径！这将极大地增加工作量。

        后面在网上查了好久，终于发现一个可以用a标签的锚点定位来实现这一效果。（当然也有一些用js实现的，但是我还么学，所以只能用这个了，而且这个也是非常方便相较于js）

        废话不多说先看代码。因为我这里嵌入了echarts代码，可能看上去代码量大了一些。不过核心就是下面这句话：把所有要切换的内容放在一个大的div里面，然后用对应的div放对应的要切换的页面，每个div设置一个id。我这里先展示了2个div，分别是map和goal。

        然后再把a标签中的href设置为#加上div的id名即可

 css代码如下。其中最重要的是overflow:hidden这句话，可以隐藏其他没有被切换的代码

/*展示国家地图和数据分析的图表*/
.show_state {
    position: relative;
    width: 100%;
    height: 74%;
    overflow: hidden;   /*很重要，用于隐藏其他要展示的内容*/
}

/*展示国家地图*/
#map {
    position: relative;
    top: -5%;
    width: 100%;
    height: 100%;
}

#goal {
    position: relative;
    top: 15%;
    left: 5%;
    width: 100%;
    height: 100%;
}