jQuery Cycle Plugin:如何使按钮链接工作?

时间:2013-04-14 15:56:23

标签: jquery jquery-cycle

我在其中一个按钮上使用了外部链接,并且在单击按钮文本时没有将我带到链接。有谁知道如何解决这个问题?

jsFiddle:http://jsfiddle.net/jetlag/Bjp5j/

HTML标记:

<div class="top button-area">
<div class="button button1">
    <div class="button-text">Button 1</div>
</div>
<div class="button button2">
    <div class="button-text"><a href="http://jquery.malsup.com/cycle/" target="_blank">Button 2</a></div>
</div>
</div>
<div class="image-area">
<div class="image-section">
    <div class="image">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" />
    </div>
</div>
<div class="image-section">
    <div class="image">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" />
    </div>
</div>
</div>

jQuery的:

var $this = $('.image-area');
  $this.cycle({
  fx: 'fade',
  speed: 'fast',
  timeout: 3000,
  pager: $this.parent().find('.button-area'),
  pauseOnPagerHover: true,
  pagerEvent: 'mouseover',
  pagerAnchorBuilder: function (idx, slide) {
    return $this.parent().find('.button-area .button:eq(' + idx + ')');
  }
});

1 个答案:

答案 0 :(得分:1)

当您使用.button-text a元素作为寻呼机时,它会删除元素的默认行为(通过preventDefault())。如果元素具有href属性,您仍然可以使用以下内容将其用作链接:

$('.button-text a')
    .filter('[href]').click(function(){
        window.location.href = $(this).attr('href');
    });

这是一个小提琴! http://jsfiddle.net/Bjp5j/1/

当您将鼠标悬停在按钮上并链接到指定的网址时,这将允许您保留切换图像的功能。

我必须注意,这种行为有点奇怪!用户可以尝试点击幻灯片显示导航以更改图像并重定向到另一页面。这将是一个意外的行为,可能会让用户感到沮丧。