0

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

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

1 回答 1

1

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

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

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

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

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

于 2013-04-14T16:03:31.807 回答