Question

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

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 + ')');
  }
});

Answer 1

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

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

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

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

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

jQuery Cycle Plugin：如何使按钮链接工作？

1 个答案: