javascript - 使用 anchor 标记时出现 "jumping"问题

Question

似乎有一些关于 anchor 标记的主题，但我缺少一些关于如何使用 Javascript 来使用 anchor 标记而不跳转的内容。所以我的页面已加载，我有一个 div，其中包含 2 个图表(1 个隐藏)，并且侧面有 2 个选项卡。我想使用这些选项卡来交换图表，而无需页面跳转到 anchor 标记。我的代码如下，但不确定需要切换什么才能使其工作。

HTML:

  <div style="width:550px; height:200px; padding:0px; border:0px; margin:0px;">
  <div id="chartContainer" style="width:500px; height:200px; overflow:hidden; position:relative; float:left;">Chart...</div>
    <div style="width:25px; height:200px; float:left; position:relative; padding-top:11px;">
    <div id="tabs1_div"  style=" position:relative; float:left; padding-bottom:10px;"><a href="#" onClick="chartRender('Tab1');" ><img src="images/labortab.png" /></a></div>
    <div id="tabs2_div"  style=" position:relative; float:left;"><a href="#" onClick="chartRender('Tab2');" ><img src="images/odctab.png" /></a></div> 
  </div>    
  </div>

Javascript:

<script type="text/javascript"><!--
FusionCharts.setCurrentRenderer('javascript');
var myChart = new FusionCharts("Charts/Column2D.swf", "myChartId", "100%", "100%", "0");
myChart.setXMLUrl("Data/Data.xml");
myChart.render("chartContainer");

var myChart1 = new FusionCharts("Charts/Column3D.swf", "myChartId1", "100%", "100%", "0");
myChart1.setXMLUrl("Data/Data.xml");
//myChart1.render("chartContainer");

function chartRender(arg) {
    if (arg == "Tab1") {
        myChart.render("chartContainer");
    }
    else if (arg == "Tab2") {
        myChart1.render("chartContainer");
    }

}
// -->  
</script>   

Answer 1

将return:false 添加到您的chartRender 函数中。

function chartRender(arg) {
    if (arg == "Tab1") {
        myChart.render("chartContainer");
    }
    else if (arg == "Tab2") {
        myChart1.render("chartContainer");
    }
    return false;
}

您的链接位于 href 属性 (#) 后面，该属性默认位于页面顶部。通过返回 false，您可以取消该行为。请务必修改对函数的调用，例如 onClick="return ChartRender('Tab2');"

<强> jsFiddle example