-1

请参阅下面的解决方案和更新：

这让我发疯了！！

    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/

4

3 回答 3

2

您在页面的其他地方有任何解析错误吗？

没有其他错误。它是动态添加的，但 .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 () {
于 2012-10-12T16:22:38.303 回答
1

它在这里工作：

http://jsfiddle.net/B6Cmg/

您使用的是什么版本的 jQuery？确保您的 jQuery 版本支持on()

于 2012-10-12T16:22:32.277 回答
0

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

我没有使用 display:none 作为默认值，而是使用 .hide() 在页面加载时隐藏 div，然后调用 .show()。问题解决了。

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

于 2012-10-12T19:31:34.107 回答