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

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

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

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

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

 <div class="show_state">
                <div id="map">div>
                    <script>
        var chart_a89deb8db1fb42ce8c00f23e9a3bb018 = echarts.init(
            document.getElementById('map'), 'white', {renderer: 'canvas'});
        var option_a89deb8db1fb42ce8c00f23e9a3bb018 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "color": [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    "series": [
        {
            "type": "map3D",
            "map": "china",
            "coordinateSystem": "geo3D",
            "label": {
                "show": false,
                "margin": 8,
                "formatter": function(data){return data.name + ' ' + data.value[2];}
            },
            "data": [],
            "showLegendSymbol": true,
            "emphasis": {}
        }
    ],
    "legend": [
        {
            "data": [
                ""
            ],
            "selected": {},
            "show": false,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "geo3D": {
        "map": "\u5fb7\u56fd",
        "boxWidth": 100,
        "boxHeight": 100,
        "boxDepth": 80,
        "regionHeight": 3,
        "groundPlane": {
            "show": false,
            "color": "#aaa"
        },
        "instancing": false,
        "itemStyle": {
            "color": "rgb(5,101,123)",
            "borderColor": "rgb(62,215,213)",
            "borderWidth": 0.8,
            "opacity": 1
        },
        "label": {
            "show": false,
            "formatter": function(data){return data.name +  + data.value[2];}
        },
        "emphasis": {
            "label": {
                "show": false,
                "color": "#fff",
                "margin": 8,
                "fontSize": 10,
                "backgroundColor": "rgba(0,23,11,0)"
            }
        },
        "light": {
            "main": {
                "color": "#fff",
                "intensity": 1.2,
                "shadow": false,
                "shadowQuality": "high",
                "alpha": 40,
                "beta": 10
            },
            "ambient": {
                "color": "#fff",
                "intensity": 0.3
            },
            "ambientCubemap": {
                "diffuseIntensity": 0.5,
                "specularIntensity": 0.5
            }
        },
        "temporalSuperSampling": {
            "enable": "auto"
        },
        "zlevel": -10,
        "left": "auto",
        "top": "auto",
        "right": "auto",
        "bottom": "auto",
        "width": "auto",
        "height": "auto"
    },
    "title": [
        {
            "show": true,
            "target": "blank",
            "subtarget": "blank",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ]
};
        chart_a89deb8db1fb42ce8c00f23e9a3bb018.setOption(option_a89deb8db1fb42ce8c00f23e9a3bb018);
    script>
                <div id="goal">div>
                    <script>
        var chart_eaa4cf6c1af94509803071b8f3657f5b = echarts.init(
            document.getElementById('goal'), 'white', {renderer: 'canvas'});
        var option_eaa4cf6c1af94509803071b8f3657f5b = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "color": [
        "blue",
        "green",
        "yellow"
    ],
    "series": [
        {
            "type": "pie",
            "name": "\u8fdb\u7403\u6765\u6e90\u5360\u6bd4",
            "colorBy": "data",
            "legendHoverLink": true,
            "selectedMode": false,
            "selectedOffset": 10,
            "clockwise": true,
            "startAngle": 90,
            "minAngle": 0,
            "minShowLabelAngle": 0,
            "avoidLabelOverlap": true,
            "stillShowZeroSum": true,
            "percentPrecision": 2,
            "showEmptyCircle": true,
            "emptyCircleStyle": {
                "color": "lightgray",
                "borderColor": "#000",
                "borderWidth": 0,
                "borderType": "solid",
                "borderDashOffset": 0,
                "borderCap": "butt",
                "borderJoin": "bevel",
                "borderMiterLimit": 10,
                "opacity": 1
            },
            "data": [
                {
                    "name": "\u5927\u7981\u533a\u5185\u8fdb\u7403",
                    "value": 2
                },
                {
                    "name": "\u5c0f\u7981\u533a\u5185\u7981\u533a",
                    "value": 12
                },
                {
                    "name": "\u7981\u533a\u5916\u8fdb\u7403",
                    "value": 1
                }
            ],
            "radius": [
                "0%",
                "75%"
            ],
            "center": [
                "50%",
                "50%"
            ],
            "label": {
                "show": true,
                "margin": 8,
                "formatter": "{b}: {c}"
            },
            "labelLine": {
                "show": true,
                "showAbove": false,
                "length": 15,
                "length2": 15,
                "smooth": false,
                "minTurnAngle": 90,
                "maxSurfaceAngle": 90
            },
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "showContent": true,
                "alwaysShowContent": false,
                "showDelay": 0,
                "hideDelay": 100,
                "enterable": false,
                "confine": false,
                "appendToBody": false,
                "transitionDuration": 0.4,
                "formatter": "{a} 
{b}: {c} ({d}%)",
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0,
                "padding": 5,
                "order": "seriesAsc"
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u5927\u7981\u533a\u5185\u8fdb\u7403",
                "\u5c0f\u7981\u533a\u5185\u7981\u533a",
                "\u7981\u533a\u5916\u8fdb\u7403"
            ],
            "selected": {},
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "title": [
        {
            "show": true,
            "text": "\u5fb7\u56fd\u8fdb\u7403\u5206\u6790",
            "target": "blank",
            "subtarget": "blank",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ]
};
        chart_eaa4cf6c1af94509803071b8f3657f5b.setOption(option_eaa4cf6c1af94509803071b8f3657f5b);
    script>
            div>

 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%;
}