Question

查看此解决方案及以下更新：

这让我发疯了！

    productTabAnchors.on('click', function (e) {
      var index = productTabLis.index($(this).parent());

      e.preventDefault();

      // switch all tabs off  
      productTabLis.removeClass('active');
      productTabAnchors.removeClass('active');
      productTabContent.removeClass('active').hide();

      // switch this tab on  
      $(this).addClass("active");
      productTabLis.eq(index).addClass('tab active');
      productTabContent.eq(index).addClass('active').show();
    });

页面跳转到锚点时，

e.preventDefault()似乎不起作用。锚点嵌套在li中，因此我也尝试了e.stopPropagation和return false。

为什么这不起作用？

这是一个显示问题的小提琴的链接：http://jsfiddle.net/mayoung/4zs97/

Answer 1

页面上的其他地方是否有任何解析错误？

没有其他错误。它是动态添加的，但.on应该处理动态创建的元素的事件绑定。正确？

您使用错误的.on语法来处理动态元素。

您需要的是

//v- Replace document with closest existing container on DOM ready
$(document).on('click', [selector], function() {
//                      ^-- replace with the dynamic element selector.

productTabAnchors是一系列锚点$（'。product-tabs li a'）;

所以在你的情况下应该是，

$(document).on('click', '.product-tabs li a', function () {

或者如果页面加载时存在.product-tabs，

$('.product-tabs').on('click', 'li a', function () {

Answer 2

它在这里工作：

http://jsfiddle.net/B6Cmg/

您使用的是哪个版本的jQuery？确保您的jQuery版本支持 on（）

Answer 3

谢谢大家的建议。事实证明它可能与显示和隐藏元素有关。 e.preventDefault正在运行，但是当我点击这些元素时页面仍在跳转。我相信，因为隐藏元素的高度变化，窗口不确定当这些元素变得可见时如何响应。

而不是display：none作为默认值，我使用.hide（）来隐藏页面加载时的div，然后调用.show（）。问题解决了。

这是一个演示解决方案的小提琴的链接： http://jsfiddle.net/mayoung/4zs97/

jQuery .show（）/。hide（）导致页面跳转点击

3 个答案: