0

似乎有一些关于锚标签的主题，但我错过了一些关于如何使用 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>
4

4 回答 4

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 示例

于 2013-07-15T15:13:07.793 回答
1

使用return false;- 虽然它可以防止跳跃，但它有点矫枉过正。了解单击某物时会发生什么很重要 - 会发生 2 件事：

  1. 在您单击的元素上触发“单击”事件。此单击事件使 DOM 树 (HTML) 向上冒泡，直到到达根元素（HTML 标记或窗口）。

  2. 如果您单击的项目是一个超链接并且有一个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
}
于 2013-07-15T15:29:34.270 回答
0

在<a>单击时调用的函数中，return false;在末尾添加一个，这将防止它跳转。

于 2013-07-15T15:12:47.577 回答
0

onClick我不会在您的 dom 中使用，而是在您的 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

于 2013-07-15T15:17:44.860 回答