基于Ajax+div的“左边菜单、右边内容”页面效果实现中遇到的问题

Question

https://www.cnblogs.com/Dreamer-1/p/5683992.html
基于这篇文章给的代码进行界面设计，但是在操作的过程中出现了这样的问题

发现在控制台中我自己的页面代码没有完整实现，

右侧部分正确的显示效果应该是这样的：

有没有大神可以给说一下为什么中代码没有完整加载</p> <p>调用网页的代码：</p> <pre><code> function init(){                 map = new SuperMap.Map(&quot;map&quot;,{controls: [                     new SuperMap.Control.LayerSwitcher(),                     new SuperMap.Control.ScaleLine(),                     new SuperMap.Control.Zoom(),                     new SuperMap.Control.Navigation({                         dragPanOptions: {                             enableKinetic: true                         }                     })]                 });                 baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer(&quot;China&quot;, url, {transparent: true, cacheEnabled: true}, {maxResolution: &quot;auto&quot;});                 baseLayer.events.on({&quot;layerInitialized&quot;:addLayer}); strategy = new SuperMap.Strategy.GeoText();                         } function addLayer(){   map.addLayers([baseLayer]);                 map.setCenter(new SuperMap.LonLat(118, 40), 6); map.allOverlays = true; } function addSingleThemeUnique(){         removeTheme(); removeTheme(); var themeService = new SuperMap.REST.ThemeService(url, { eventListeners: { &quot;processCompleted&quot;: themeCompleted, &quot;processFailed&quot;: themeFailed } }), style1 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(137, 203, 187), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 }), style2 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(233, 235, 171), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 }), style3 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(135, 157, 157), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 }), themeRangeIteme1 = new SuperMap.REST.ThemeRangeItem({ start: 0, end: 500000000000, style: style1 }), themeRangeIteme2 = new SuperMap.REST.ThemeRangeItem({ start: 500000000000, end: 1000000000000, style: style2 }), themeRangeIteme3 = new SuperMap.REST.ThemeRangeItem({ start: 1000000000000, end: 3000000000000, style: style3 }), themeRange = new SuperMap.REST.ThemeRange({ rangeExpression: &quot;SMAREA&quot;, rangeMode: SuperMap.REST.RangeMode.EQUALINTERVAL, items: [themeRangeIteme1, themeRangeIteme2, themeRangeIteme3] }), themeParameters = new SuperMap.REST.ThemeParameters({ datasetNames: [&quot;China_Province_pg&quot;], dataSourceNames: [&quot;China&quot;], joinItems: null, themes: [themeRange], types: [&#39;REGION&#39;] }); var themeService = new SuperMap.REST.ThemeService(url, {eventListeners:{&quot;processCompleted&quot;: themeCompleted, &quot;processFailed&quot;:themeFailed}}); themeService.processAsync(themeParameters); } function themeCompleted(themeEventArgs) {                 if (themeEventArgs.result.resourceInfo.id) { themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer(&quot;中国各省面积_分段专题图&quot;, url, { cacheEnabled: false, transparent: true, layersID: themeEventArgs.result.resourceInfo.id }, {&quot;maxResolution&quot;: &quot;auto&quot;}); themeLayer.events.on({&quot;layerInitialized&quot;: addThemeLayer}); }             }             function addThemeLayer() {                 map.addLayer(themeLayer);             } function addThemeUnique() {                 removeTheme();                // var themeService = new SuperMap.REST.ThemeService(url, {eventListeners:{&quot;processCompleted&quot;: themeCompleted, &quot;processFailed&quot;: themeFailed}}); removeTheme(); var themeService = new SuperMap.REST.ThemeService(url, { eventListeners: { &quot;processCompleted&quot;: themeCompleted, &quot;processFailed&quot;: themeFailed } }); var style1, style2, style3, style4, style5, style6; style1 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(248, 203, 249), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 }); style2 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(196, 255, 189), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 }); style3 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(255, 173, 173), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 }); style4 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(255, 239, 168), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 }); style5 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(173, 209, 255), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 }); style6 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(132, 164, 232), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 }); var themeUniqueIteme1 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;黑龙江省&quot;, style: style1 }), themeUniqueIteme2 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;湖北省&quot;, style: style2 }), themeUniqueIteme3 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;吉林省&quot;, style: style3 }), themeUniqueIteme4 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;内蒙古自治区&quot;, style: style4 }), themeUniqueIteme5 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;青海省&quot;, style: style5 }), themeUniqueIteme6 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;新疆维吾尔自治区&quot;, style: style6 }), themeUniqueIteme7 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;云南省&quot;, style: style1 }), themeUniqueIteme8 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;四川省&quot;, style: style4 }), themeUniqueIteme9 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;贵州省&quot;, style: style3 }), themeUniqueIteme10 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;甘肃省&quot;, style: style3 }), themeUniqueIteme11 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;宁夏回族自治区&quot;, style: style5 }), themeUniqueIteme12 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;重庆市&quot;, style: style6 }), themeUniqueIteme13 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;山东省&quot;, style: style1 }), themeUniqueIteme14 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;安徽省&quot;, style: style2 }), themeUniqueIteme15 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;江西省&quot;, style: style3 }), themeUniqueIteme16 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;浙江省&quot;, style: style4 }), themeUniqueIteme17 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;台湾省&quot;, style: style2 }), themeUniqueIteme18 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;江苏省&quot;, style: style6 }), themeUniqueIteme19 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;湖南省&quot;, style: style5 }), themeUniqueIteme20 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;河南省&quot;, style: style4 }), themeUniqueIteme21 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;河北省&quot;, style: style3 }), themeUniqueIteme22 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;福建省&quot;, style: style5 }), themeUniqueIteme23 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;广西壮族自治区&quot;, style: style6 }), themeUniqueIteme24 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;西藏自治区&quot;, style: style2 }), themeUniqueIteme25 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;广东省&quot;, style: style4 }), themeUniqueIteme26 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;山西省&quot;, style: style2 }), themeUniqueIteme27 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;陕西省&quot;, style: style1 }), themeUniqueIteme28 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;天津市&quot;, style: style5 }), themeUniqueIteme29 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;北京市&quot;, style: style2 }), themeUniqueIteme30 = new SuperMap.REST.ThemeUniqueItem({ unique: &quot;辽宁省&quot;, style: style1 }); var themeUniqueItemes = [themeUniqueIteme1, themeUniqueIteme2, themeUniqueIteme3, themeUniqueIteme4, themeUniqueIteme5, themeUniqueIteme6, themeUniqueIteme7, themeUniqueIteme8, themeUniqueIteme9, themeUniqueIteme10, themeUniqueIteme11, themeUniqueIteme12, themeUniqueIteme13, themeUniqueIteme14, themeUniqueIteme15, themeUniqueIteme16, themeUniqueIteme17, themeUniqueIteme18, themeUniqueIteme19, themeUniqueIteme20, themeUniqueIteme21, themeUniqueIteme22, themeUniqueIteme23, themeUniqueIteme24, themeUniqueIteme25, themeUniqueIteme26, themeUniqueIteme27, themeUniqueIteme28, themeUniqueIteme29, themeUniqueIteme30]; var themeUnique = new SuperMap.REST.ThemeUnique({ uniqueExpression: &quot;Name&quot;, items: themeUniqueItemes, defaultStyle: style1 }); themeParameters = new SuperMap.REST.ThemeParameters({ datasetNames: [&quot;China_Province_pg&quot;], dataSourceNames: [&quot;China&quot;], themes: [themeUnique], types: [&#39;REGION&#39;] }); var themeService = new SuperMap.REST.ThemeService(url, {eventListeners:{&quot;processCompleted&quot;: themeCompleted2, &quot;processFailed&quot;:themeFailed}});                 themeService.processAsync(themeParameters);             }             function themeCompleted2(themeEventArgs) {                 if(themeEventArgs.result.resourceInfo.id) {                     themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer(&quot;中国行政区划_单值专题图&quot;, url, {cacheEnabled:false,transparent: true,layersID: themeEventArgs.result.resourceInfo.id}, {&quot;maxResolution&quot;: &quot;auto&quot;});                     themeLayer.events.on({&quot;layerInitialized&quot;: addThemeLayer});                 }             }             function addThemeLayer() {                 map.addLayer(themeLayer);             } function addPointUnique() {             removeTheme(); removeTheme(); var themeService = new SuperMap.REST.ThemeService(url, {eventListeners: {&quot;processCompleted&quot;: themeCompleted, &quot;processFailed&quot;: themeFailed}}), graStyle = new SuperMap.REST.ThemeGraduatedSymbolStyle({ positiveStyle: new SuperMap.REST.ServerStyle({ markerSize: 50, markerSymbolID: 0, lineColor: new SuperMap.REST.ServerColor(255, 165, 0), fillBackColor: new SuperMap.REST.ServerColor(255, 0, 0) }) }), themeGraduatedSymbol = new SuperMap.REST.ThemeGraduatedSymbol({ expression: &quot;SMAREA&quot;, baseValue: 3000000000000, graduatedMode: SuperMap.REST.GraduatedMode.CONSTANT, flow: new SuperMap.REST.ThemeFlow({ flowEnabled: true }), style: graStyle }), themeParameters = new SuperMap.REST.ThemeParameters({ themes: [themeGraduatedSymbol], datasetNames: [&quot;China_Province_pg&quot;], dataSourceNames: [&quot;China&quot;], types: [&#39;REGION&#39;] }); var themeService = new SuperMap.REST.ThemeService(url, {eventListeners:{&quot;processCompleted&quot;: themeCompleted3, &quot;processFailed&quot;:themeFailed}}); themeService.processAsync(themeParameters); } function themeCompleted3(themeEventArgs) {                 if(themeEventArgs.result.resourceInfo.id) {                     themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer(&quot;中国行政区划_等级符号专题图&quot;, url, {cacheEnabled:false,transparent: true,layersID: themeEventArgs.result.resourceInfo.id}, {&quot;maxResolution&quot;: &quot;auto&quot;});                     themeLayer.events.on({&quot;layerInitialized&quot;: addThemeLayer});                 }             }             function addThemeLayer() {                 map.addLayer(themeLayer);             } function themeFailed(serviceFailedEventArgs) {                 //doMapAlert(&quot;&quot;,serviceFailedEventArgs.error.errorMsg,true);                 alert(serviceFailedEventArgs.error.errorMsg);             }             function removeTheme() { var x=document.getElementById(&quot;select1&quot;).selectedIndex; if(x==1) { if(map.layers.length &gt; 1) {                 map.removeLayer(themeLayer, true);                 } } if(x==2) {                 if(map.layers.length &gt; 1) {                 map.removeLayer(themeLayer, true);                 } } if (x==3) { if (map.layers.length &gt; 1) {                 map.removeLayer(themeLayer, true);                 } }             } function getFunction(){ var x=document.getElementById(&quot;select1&quot;).selectedIndex; var mid=document.getElementById(&quot;select1&quot;).options[x].getAttribute(&quot;mid&quot;); //console.log(mid); if (x==1) { addSingleThemeUnique(); //alert(&quot;1&quot;); } else if (x==2) { addThemeUnique(); } else if (x==3) { addPointUnique(); } } </code></pre>

Answer 1

控制台不是提示了，缺少getFunction，removeTheme 2个函数
设置dom的onclick属性添加代码的，这2个函数要放到window作用域下，不能放到其他函数内部，这样是私有的onclick中调用的js代码访问不到，必须要是window下的

除非在这2个函数的作用域内容js用addEventListener添加click事件