使用錨標記「跳躍」的問題

似乎有幾個主題在錨標記上，但我缺少關於如何使用JavaScript來使用錨標記而沒有跳轉的內容。所以我的頁面被加載，並且我有一個可以存儲2個圖表（隱藏1個）的div，並且在邊上有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>

來源

2013-07-15 Keith

將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

來源

2013-07-15 15:13:07 j08691

這工作謝謝！ – Keith

不客氣。 – j08691

在你在<a>點擊呼叫功能，在末尾添加一個return false;，這將阻止其跳樓。

來源

2013-07-15 15:12:47

，而不是你的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。

來源

2013-07-15 15:17:44 smerny

使用return false; - 雖然它可能阻止跳躍，但這有點矯枉過正。你明白髮生了什麼，當你點擊的東西是很重要的 - 2件事情：

「點擊」事件是你點擊的元素上觸發。這個點擊事件冒泡了DOM Tree（HTML），直到它到達根元素（HTML標記或Window）。
如果您單擊的項目是一個超鏈接，並具有href，該瀏覽器是要採取某種行動來執行超鏈接 - 在你的情況下，散列標籤，這會導致跳躍。

的事件＃鼓泡描述1是很重要的，因爲你可能有某種分析系統，它將一個包羅萬象的事件監聽器對身體標記。您也可以在頁面上使用其他插件，只要單擊超鏈接就可以執行其他操作。關鍵是，你永遠不會知道未來還有什麼可能或可能不需要該點擊事件 - 所以讓「點擊」事件讓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;，但更DESCRIPT和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-15 15:29:34

+1瞭解詳細的答案 – krishgopinath

使用錨標記「跳躍」的問題

回答

相關問題