如何链接到特定的 jquery 函数答案

【问题标题】：How to link to a specific jquery function如何链接到特定的 jquery 函数
【发布时间】：2014-11-20 18:33:14
【问题描述】：

我有一个 jquery 菜单。例如，如果我点击“联系人”，它会指向#contacts 并通过 jquery 显示一个弹出窗口。这是我的代码：

$(function () {
$('#contacts').on('click', function ( e ) {
    $.fn.custombox( this, {
    effect: 'fall'
});
    e.preventDefault();
});
});

我正在尝试将联系人页面链接到其他人，但 www.mysite.com/#contacts 显示主页。我如何实现我的目标（分发一个简单的直接链接到“内部页面”）？

编辑根据差事的回答，我找到了解决方案：

$(document).ready(function() {
switch (location.hash) {
case '#centr':
          $.fn.custombox( document.getElementById('centr'), {
    effect: 'fall'
});
    break;
case '#sxalto':
    $.fn.custombox( document.getElementById('sxalto'), {
    effect: 'fall'
});
    break;
case '#dxalto':
    $.fn.custombox( document.getElementById('dxalto'), {
    effect: 'fall'
});
    break;
case '#sxbasso':
    $.fn.custombox( document.getElementById('sxbasso'), {
    effect: 'fall'
});
    break;
case '#dxbasso':
    $.fn.custombox( document.getElementById('dxbasso'), {
    effect: 'fall'
});
    break;
case '#basso':
    $.fn.custombox( document.getElementById('basso'), {
    effect: 'fall'
});
    break;
case '#sottosotto':
    $.fn.custombox( document.getElementById('sottosotto'), {
    effect: 'fall'
});
    break;
} 
});

【问题讨论】：

您正在使用 Angular 或挖空器，否则请检查此github.com/aaronblohowiak/routes.js

标签： javascript jquery

【解决方案1】：

当我说对了时，您将位置哈希附加到您的 url 并希望人们能够直接访问子页面，而不是主页。我是这样解决的：

在我的 index.html 上，我得到了以下 js 代码

$(window).load(function() {
    if(location.hash)
    {
        linkedHash = location.hash //read the location hash variable
        // and here comes your personal load code, based on the appended location hash
    }

可以在我的回答中找到更深入的解释： Creating and structuring the index page

【讨论】：

【解决方案2】：

这是你想要的吗？

$('#contacts').on('click', function () {
    window.location.href= "www.google.com";//or any other page
});

【讨论】：

【解决方案3】：

您可能可以使用 jQuery Mobile 并使用类似的东西

<body> 

<!-- Start of first page -->
<div data-role="page" id="foo">

    <div data-role="header">
        <h1>Foo</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="bar">

    <div data-role="header">
        <h1>Bar</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p><a href="#foo">Back to foo</a></p>   
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->
</body>

【讨论】：

【解决方案4】：

听起来您想初次访问www.mysite.com/#contacts 以打开“联系人”弹出窗口。这可能会做到：

$(window).on("load", function() {
    var $target;
    if(window.location.hash) {
        $target = $(window.location.hash);
        if($target.length) {
            $target.trigger("click");
        }
    }
});

它会查看页面上是否存在 ID 与哈希匹配的元素。如果有，它会触发它的点击事件，这将调用你的代码来呈现弹出窗口。

【讨论】：