HTML / JQuery如何同时使用href和onclick？

Question

我被分配去在一个有很多按钮的网页上工作。 这些按钮中的每个按钮都需要向下滚动到特定的div并更改其内容。 我的问题是，每次单击时，除非我移除href，否则它只会锚定并且不会激活oncl​​ick。 如何同时使用href和onclick？

例：

<a href="#divId" onclick="alert('Test');"><img src="images/image.png" /></a>

Answer 1

如果您从onclick返回true，它将执行href。 如果从onclick返回false，则不会执行href：

<a href="#divId" onclick="alert('Do nothing'); return false;">Do Nothing</a>

<a href="#divId" onclick="alert('Do something'); return true;">Do Href</a>

Answer 2

一种方法是在javascript中也跳转到位置。 好处是您可以选择发生的顺序。 在这种情况下，您可以根据需要在移动到新位置后显示警报。

您可以编写如下函数：

function jumpTo(strLocTag){
    window.location.hash = strLocTag;
}

然后像这样修改HTML：

<a href="#" onclick="jumpTo('divId');alert('Test');"><img src="images/image.png" /></a>

Answer 3

尝试创建一个具有两者的onclick调用函数，因此当您单击它时，它将执行您在此处试图实现的所有功能，然后将您重定向到您指向的网址

window.location.replace("~/Page.aspx#divId");

Answer 4

您也可以使用一个函数来保持HTML干净

<a href="#divId" onclick="extra(); return false;"><img src="images/image.png" /></a>

在您的javascript文件中

function extra(){
    alert("Test");
    window.location.replace("http://stackoverflow.com");
}

Answer 5

如果是我，我将只使用onClick方法执行所有操作，而不必考虑href部分。

首先，onClick方法可以完成您想做的事情，然后向下滚动到anchor标签。 这是我使用jQuery编写的一个函数，用于使用锚标记在页面上平滑滚动。 这就是我将如何使用它：

function smoothScroll(anchorName, scrollSpeed) {

    // Do whatever you were going to have in the onClick event here

    // Start the scrolling to the anchor tag
    var gotoAnchor = "a[name='" + anchorName + "']";
    var scrollToPoint = $(gotoAnchor).offset().top;
    $('html, body').animate({ scrollTop: scrollToPoint }, scrollSpeed);
}

然后，要使用该函数，只需取出链接的href并将此函数放在onClick事件中：

<a href="javascript:void(0)" onclick="smoothScroll('divId', 400);"><img src="images/image.png" /></a>