我在其中一个按钮上使用了外部链接,并且在单击按钮文本时没有将我带到链接。有谁知道如何解决这个问题?
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 + ')');
}
});
答案 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/
当您将鼠标悬停在按钮上并链接到指定的网址时,这将允许您保留切换图像的功能。
我必须注意,这种行为有点奇怪!用户可以尝试点击幻灯片显示导航以更改图像并重定向到另一页面。这将是一个意外的行为,可能会让用户感到沮丧。