如何正确使用 href="#someID"？答案

【问题标题】：How to properly use href="#someID"?如何正确使用 href="#someID"？
【发布时间】：2026-02-22 23:40:01
【问题描述】：

基本上，我想要一个链接列表，其中每个链接将显示一个 div。我已经完成了所有设置，以便它可以正常工作，但我只是不知道哪些事件被触发，以及以什么顺序触发。我想添加功能，以便在显示这些 div 之一时运行 javascript。但到目前为止使用这样的代码：

<a href="#div1" onclick="some_script()" />

在实际显示 div 之前调用 some_script()。这对我来说没用，因为在显示 div 之后，我试图让某个输入框成为焦点。

谁能告诉我哪些 jquery 事件被触发，或者我可以使用哪些 jquery 事件以便在向用户显示 div 后运行 some_script()？

【问题讨论】：

首先，阅读更多关于 jQuery 的基础知识。无需像您那样拨打onclick。
当然，这是有道理的。但我还需要在显示 div 后执行一些功能。我仍然需要一些带有href的东西，如果不是只有onclick而不是href，我不会吗？

标签： jquery events html href

【解决方案1】：

你可以使用这样的东西

$(document).ready(function(){
    $('a').click(function(){ //attaches click event to all 'a' elements on page
        var div = $(this).attr("href").substr(1); //gets the div
        $(div).show(); //show the div
    });
});

这个链接应该让你开始使用 jQuery。 http://docs.jquery.com/Main_Page

【讨论】：

我有点想我将不得不做这样的事情。现在我不想将它附加到所有 'a' 元素上，在我在这里进行测试之前， $('.divClass').click ... 应该只给我带有 divClass 类的元素，对吧？无论如何只能选择带有 divClass 元素的“a”元素吗？愚蠢的事情要问，但是如果我想在单独的文件中使用该功能，我可以通过 javascript 传递“this”元素吗？
Yes $('.divClass') 只会选择具有该类的元素。您可以将此函数放在单独的 js 文件中，只要它在您的页面中被引用，并且函数被包裹在 $(document).ready({}) 中。

【解决方案2】：

如果我正确理解了您的要求：

HTML

<p><a href="#div_one" class="trigger">1st div</a></p>
<p><a href="#div_two" class="trigger">2nd div</a></p>
<div id="div_one">
    Some content
    <input type="text" name="input1" class="input">
</div>
<div id="div_two">
    Some more content
     <input type="text" name="input2" class="input">
</div>

CSS

div {
    border: 2px solid green;
    background-color: lightgreen;
    color: black;
    display: none;
    margin: 10px;
    padding: 5px;
}

JavaScript

$('.trigger').click(function(e) {
    e.preventDefault();
    var target_div = $(this).attr('href');
    $(target_div).toggle();
    $(target_div).find('.input').focus();
});

jsFiddle 演示：http://jsfiddle.net/byuPL/

【讨论】：