Question

我被分配到一个网页上，上面有一堆按钮。每个按钮都需要向下滚动到特定的div并更改其内容。我的问题是，每次我点击它，它只会锚定并永远不会激活onclick，除非我删除href。我怎样才能使用两个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方法可以首先执行您想要执行的操作，然后向下滚动到锚标记。这是我使用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>

HTML / JQuery如何使用BOTH href和onclick？

5 个答案: