jQuery 自定义 div 之间的切换

Question

遇到一些麻烦无法理解为什么它不能正常工作。

http://host.philmadelphia2.com/~clare/order/

当您单击顶部的两个“订单...”链接时，它们应该在 div 之间切换。当一个页面处于活动状态时，单击该页面的按钮应该没有任何效果。只有在点击非活动页面的按钮时才会有一个动作。

这里是 JS 的链接。

http://host.philmadelphia2.com/~clare/wp-content/themes/theme/js/pager.js

我正在使用 jQuery 和 jQuery UI 来制作效果。

谢谢， 皮特

Answer 1

我在jsfiddle 上拼凑了一个看起来可行的快速模型。为了便于阅读，我删除了很多标记。

我所做的唯一更改是删除函数声明中的 $ 符号并使用 live() 事件处理程序而不是 click()。

编辑：出于解释目的，由于您通过添加和删除类来操作 DOM，因此您必须使用 live() 事件处理程序。

Answer 2

如果您继续单击“订购样品”，则会在所有 a.button 上来回切换非活动类。

您基本上要寻找的是一个 jQuery 选项卡脚本。在您的情况下，“标签”只是文本链接。我最近在一个带有文本标签的网站上使用了idTabs script，效果很好。

Answer 3

您的锚点选择器错误。在您的标记中，unactive 类仅应用于页面加载时的一个锚点，因此 a.unactive 将仅选择具有 unactive 类的锚点。您希望将click 事件附加到两个锚点，因此您应该使用应用于两个锚点的button 类。试试这个

    jQuery('a.unactive').live(function($){
        jQuery('a.button').toggleClass('unactive');
        jQuery('div.page').toggle('blind','',500);
        console.log('clicked');
    });