0

ボタンの 1 つで外部リンクを使用しましたが、ボタン テキストをクリックしてもリンクに移動しません。これを修正する方法を知っている人はいますか？

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 に答える