Question

是否可以让<a href="">做两件事？一个到javascript:，另一个使用<a id="">和#标记跳转到文档中的某个部分。

总之我正在寻找这样的东西：

<a href="javascript:someFunction('params');#paragraphSectionId">Link</a>

Answer 1

是的，使用onclick属性：

<a href="#paragraphSectionId" onclick="someFunction('params');">Link</a>

Answer 2

当然，你可以这样做：

<a href="#paragraphSectionId" onclick="someFunction('params')">Link</a>

Answer 3

我建议使用不引人注目的JavaScript，将事件处理从HTML中移开：

function doSomething(){
    console.log("You clicked on the " + this.tagName.toLowerCase() + " element.");
}

var link = document.getElementById('aElementID');
link.onclick = doSomething;

JS Fiddle demo

但这确实需要id元素上的a：

<a href="#paragraphSectionId" id="aElementID">Go to the paragraph</a>

但是，您可以使用类名，但这涉及将功能绑定到多个元素，使用for循环（或类似）;给定a元素具有以下形式：

<a href="#paragraphSectionIdOne" class="linkClassName">Go to the paragraph</a>
<a href="#paragraphSectionIdTwo" class="linkClassName">Go to the other paragraph</a>

JavaScript将成为：

function doSomething(){
    console.log("You clicked on the " + this.tagName.toLowerCase() + " element.");
}

var links = document.getElementsByClassName('linkClassName');
for (var i = 0, len = links.length; i < len; i++){
    links[i].onclick = doSomething;
}

JS Fiddle demo

您甚至可以将事件处理绑定到祖先元素，并基于哪个元素接收事件的响应;这将允许形式的HTML：

<div id="arbitraryAncestorElement">
    <a href="#one">Go to One</a>
    <ul>
        <li><a href="#two">Go to Two</a></li>
        <li><a href="#three">Go to Three</a></li>
    </ul>
</div>

使用JavaScript：

function doSomething(event){
    if (event.target.tagName.toLowerCase() === 'a') {
        console.log("You clicked on an 'a' element.");
    }
}

var ancestor = document.getElementById('arbitraryAncestorElement');
ancestor.onclick = doSomething;

JS Fiddle demo

一个href - 如何执行javascript并跳转到一个部分？

3 个答案: