Question

在锚标签上似乎有一些主题，但我遗漏了一些关于如何使用Javascript来使用没有跳转的锚标签的东西。所以我的页面已加载，我有一个div，它包含2个图表（1个隐藏）并且侧面有2个选项卡。我想使用这些选项卡来交换图表，而不会将页面跳转到锚标记。我有我的代码，但不知道我需要切换到什么才能使它工作。

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

Answer 2

使用return false; - 虽然它可能会阻止跳跃，但它有点矫枉过正。重要的是你要了解当你点击什么时会发生什么 - 发生了两件事：

在您单击的元素上触发“click”事件。这个单击事件冒泡DOM树（HTML），直到它到达根元素（HTML标记或窗口）。
如果您点击的项目是超链接并且有href，那么浏览器将采取某种行动来执行超链接 - 在您的情况下是一个哈希标记，导致跳转。

＃1中描述的事件冒泡非常重要，因为您可能拥有某种分析系统，可以在BODY标记上放置一个包含所有事件的侦听器。您可能还在页面上有其他插件，只要单击超链接就会执行其他操作。关键是，您永远不知道将来可能会或可能不需要点击事件 - 所以让“点击”事件冒泡到DOM并不会有什么坏处。通过使用return false;，您可以防止其他任何事情发生点击事件。

您要做的主要是阻止超链接的默认行为。为此，您可以在事件处理程序中调用preventDefault()：

var hyperlink = document.getElementById("my-hyperlink");
hyperlink.onclick = function(ev) {
   ev.preventDefault(); // Prevent the default behavior of the browser
}

您也可以执行以下操作，这与return false;基本相同，但在使用JavaScript编程方面更具描述性和“正确性”：

var hyperlink = document.getElementById("my-hyperlink");
hyperlink.onclick = function(ev) {
   ev.stopPropagation(); // Stop the event bubbling
   ev.preventDefault(); // Prevent the default behavior of the browser
}

Answer 3

在您呼叫<a>点击的功能中，最后添加return false;，这样可以防止其跳转。

Answer 4

不是在你的dom中使用onClick，而是在你的javascript中执行此操作：

$(document).ready( function() {
    $(".chartRenderer").click( function(e) {
        e.preventDefault(); //this will prevent the "jump"
        var arg = $(this).closest("div").attr("id");
        if (arg == "tabs1_div") {
            myChart.render("chartContainer");
        }
        else if (arg == "tabs2_div") {
            myChart1.render("chartContainer");
        }
    });
});

这需要您在锚点上添加class chartRenderer。

使用锚标签“跳跃”的问题

4 个答案: