javascript - issues with "jumping" using anchor tags -


there seems few subjects on anchor tags missing on how use javascript use anchor tag without jump. page loaded , have div holds 2 charts ( 1 hidden ) , has 2 tabs on side. i'd use tabs interchange charts without having page jump down anchor tag. have code below not sure need switch make work.

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>    

add return:false chartrender function.

function chartrender(arg) {     if (arg == "tab1") {         mychart.render("chartcontainer");     }     else if (arg == "tab2") {         mychart1.render("chartcontainer");     }     return false; } 

your links following href attribute (#) defaults top of page. returning false cancel behavior. sure modify call function onclick="return chartrender('tab2');"

jsfiddle example


Comments