如何导航到内部链接并执行 jquery 函数？

Question

我对 jquery 很陌生。 我正在使用这个 jquery 代码片段，它工作正常。但我想从网站上的任何位置进行导航，并且仍然可以使用该功能：

    function showselectedbox(theselectedbox) {
        $(".pageboxes").each(function (index) {
            if ($(this).attr("id") == theselectedbox) {
                $(this).show(200);
            }
            else {
                $(this).hide(600);

            }
        });
    }
<a id="myHeader1" href="javascript:showselectedbox('mynewboxes1');" >show this one only</a>
<div class="pageboxes" id="mynewboxes1">Div #1</div>
<a id="myHeader2" href="javascript:showselectedbox('mynewboxes2');" >show this one only</a>
<div class="pageboxes" id="mynewboxes1">Div #1</div>

...更多相同的内容。

我还为导航构建了一个选项卡式菜单，并希望标记所选的链接。

<div id="metaltop-teal">
                            <ul>
                                <li class="first active"><a id="myHeader1" href="javascript:showonlyone('mynewboxes1');" >show this one only</a></li>
                                <li><a id="myHeader2" href="javascript:showonlyone('mynewboxes2');" >show this one only</a></li>...
                            </ul>
                        </div>

还有其他方法来格式化 url 吗？例如：链接到页面

谢谢

Answer 1

您应该将 javascript 放入 .js 文件中，然后将该文件包含在其他文件中：

 <script src="yourfile.js" type="text/javascript"></script>

现在您可以自由引用您的 javascript 函数。

请记住在包含 jquery 之后包含您的 .js 文件，否则您的脚本将无法工作。

编辑：

为了让代码在页面加载时执行，我会使用 $('document').ready() 这可以确保在加载 DOM 的所有元素之前不会执行代码。这样，您就可以避免尝试操作不存在的元素。当使用事件处理程序（例如 click()）时，这一点尤其重要。对于 live() 和 delegate() 也附加到稍后创建的元素，这并不那么重要。

首先，您创建一行：

$('document').ready(function(){

在该行之后，您可以在页面加载时放置要执行的任何内容。

要完成此块，您可以编写

});

然后你把你的函数等等。