0

我有一个 js 库，当我将鼠标悬停在缩略图上时，页面上会显示一个大图像。但是，如果我单击拇指，它将在新页面中打开大图像。

谁能告诉我如何删除点击功能，只保留悬停效果？

这是我的js：

$(document).ready(function(){
  $('#thumbs ul li a').hover(
    function() {
      var currentBigImage = $('#bigpic img').attr('src');
      var newBigImage = $(this).attr('href');
      var currentThumbSrc = $(this).attr('rel');
      switchImage(newBigImage, currentBigImage, currentThumbSrc);
    },
    function() {}
  );
  function switchImage(imageHref, currentBigImage, currentThumbSrc) {
    var theBigImage = $('#bigpic img');
    if (imageHref != currentBigImage) {
      theBigImage.fadeOut(250, function(){
        theBigImage.attr('src', imageHref).fadeIn(250);
        var newImageDesc = $("#thumbs ul li a img[src='"+currentThumbSrc+"']")
          .attr('alt');
        $('p#desc').empty().html(newImageDesc);
      });
    }
  }
});

还有我的 HTML：

<body>
  <div id="thumbs">
    <ul>
      <li>
        <a rel="http://..." href="http://...">
          <img src="http://..." alt="Ring 1" />
        </a>
      </li>
      <li>
        <a rel="http://..." href="http://...">
          <img src="http://..." alt="Ring 2" />
        </a>
      </li>
    </ul>
    <ul>
      <li>
        <a rel="http://..." href="http://...">
          <img src="http://..." alt="Ring 7" />
        </a>
      </li>
      <li>
        <a rel="http://..." href="http://...">
          <img src="http://..." alt="Ring 8" />
        </a>
      </li>
    </ul>
  </div>
  <div id="bigpic"><img src="http://..." alt="First Main Image" />
    <p id="desc">Move your mouse over the images on the left to view here...</p>
  </div>
</body>
</html>
4

2 回答 2

3

您可以使用以下命令阻止单击超链接的默认<a>操作preventDefault()：

$('#thumbs ul li a').click(function (e) {
  e.preventDefault();
});

演示。

于 2012-09-08T14:16:25.907 回答
2

试试这个

$('#thumbs ul li a').click(function(){return false;});
于 2012-09-08T14:15:59.557 回答