无法单击 jquery 动画 div 中的链接？答案

【问题标题】：Can not click on link in jquery animated div?无法单击 jquery 动画 div 中的链接？
【发布时间】：2011-12-20 11:33:58
【问题描述】：

我遇到了这个问题：

我有一些用 jquery 制作动画的 div，我需要其中的一些链接。我把链接放在普通的“html a href”中..

有没有办法让这成为可能？上网查了两天，还请教了网页设计老师，也没找到有用的。

这是我正在开发的网站：

http://designchitchat.be/bart/vuurdood-site/

提前致谢！

【问题讨论】：

来吧。提供一些代码...
问题到底出在哪里？我在您提供的页面中看不到任何链接...
您需要更详细地解释您的问题。

标签： jquery html hyperlink mouseover animated

【解决方案1】：

您必须测试目标是否是“a”元素

我做了一个jsfiddle，你可以测试我放在“链接”框中的链接

http://jsfiddle.net/7QJPH/5/

你也可以测试这个javascript，它只适用于“链接”框，你必须复制其他部分

$(document).ready(function() {
    $('#kogelclip').draggable();
    $('#vulpen').draggable();
    $('#bio').toggle(function() {
        $(this).animate({
            top: '+=390'
        }, {
            duration: 750,
            easing: 'swing'
        });

    }, function() {
        $(this).animate({
            top: '-=390'
        }, {
            duration: 750,
            easing: 'swing'
        });
    });



    $('#discografie').toggle(function() {
        $(this).animate({
            left: '+=560'
        }, {
            duration: 750,
            easing: 'swing'
        });

    }, function() {
        $(this).animate({
            left: '-=560'
        }, {
            duration: 750,
            easing: 'swing'
        });
    });
    $('#links').toggle(function(event) {
        if (!$(event.target).is('a')) {

            $(this).animate({
                right: '+=560'
            }, {
                duration: 750,
                easing: 'swing'
            });

        } else {
            document.location.href = $(event.target).attr('href');
        }
    }, function(event) {
        if (!$(event.target).is('a')) {
            $(this).animate({
                right: '-=560'
            }, {
                duration: 750,
                easing: 'swing'
            });
        } else {
            document.location.href = $(event.target).attr('href');
        }
    });


});

【讨论】：

谢谢！这完美！只是，当我单击链接然后返回浏览器（返回我的站点）时，link-div 就像我离开页面（折叠）时一样，当我单击它时，它又折叠了。 .
（仅在 Chrome 中不会发生这种情况）有没有办法让我的网站在人们返回浏览器时刷新？所以每次访问都会重置为正常状态？感谢您的帮助！

【解决方案2】：

据我所知。你可以这样做。

<div style="width:100px;height:100px">
 <a href="http://somesite.com" style="display:inline-block;width:100%;height:100%"></a>
</div>

【讨论】：

【解决方案3】：

萨沙，我得到了他想要的。他提供了一些关于 'DISCOGRAFIE' 和 'BIO' 板的信息，这些板在点击后由于 jquery 的动画效果而滑动。我想，他想把链接放在这些块上。但点击后，动画被触发而不是调用超链接点击事件。

这可以通过所有所需链接的 onHover 效果来实现。由于动画块正在使用 onClick 事件。为此，只需在 jQuery 的 document.ready 中添加以下代码。

$("a").hover(function(){
      var link=$(this).attr('href');
      location.redirect(link);
});

【讨论】：