php - 重新加载页面时使选项卡保持不变

Question

我正在尝试修改 Gaya Design 的选项卡式内容 ( Available Here )，以便在重新加载页面时保留当前选项卡，但在单击新选项卡时更改它。我已经对其进行了一些更改，以便能够使用 PHP GET 变量更改默认选项卡。我正在处理的页面的当前状态可以查看here .

这是我可能的情况。如果您单击上面的链接，您将看到我正在开发一个简单的 PHP 购物车。现在，当用户单击添加链接时，它必须重新加载页面，并且当它这样做时它会重置选项卡。所以，我认为这应该很容易通过一个 cookie 来解决，只要单击一个新选项卡，该 cookie 就会更新……我只是不太确定如何去做。任何想法、建议或忠告将不胜感激。

这是我当前的 JS:

var TabbedContent = {
init: function() {  
    $(".category").click(function() {
        var background = $(this).parent().find(".selected");
        $(background).stop().animate({
            left: $(this).position()['left']
        }, {
            duration: 350
        });
        TabbedContent.slideContent($(this));
    });
},
slideContent: function(obj) {
    var margin = $(obj).parent().parent().find(".sliderContainer").width();
    margin = margin * ($(obj).prevAll().size() - 1);
    margin = margin * -1;

    $(obj).parent().parent().find(".displayContent").stop().animate({
        marginLeft: margin + "px"
    }, {
        duration: 1
    });
},
gotab: function( obj ) {
    var background = $(obj).parent().find(".selected");
    $(background).stop().animate({
        left: $(obj).position()['left']
        }, {
            duration: 1
        });
        TabbedContent.slideContent( $(obj) );
    }
}
$(document).ready(function() {
    TabbedContent.init();
});

以下是选项卡链接到时的初始化方式:

<?php
// Load a specific tab if required
if(isset($_GET['tab'])) {
    // Array storing possible tab IDs
    $tabChoices = array('productsTab', 'specsTab', 'brochuresTab', 'bannersTab', 'kitsTab', 'displaysTab');
    $tab = '';
    if(in_array($_GET['tab'], $tabChoices)) $tab = $_GET['tab'];
    // Default to productsTab if not in array list
    else $tab = 'productsTab';
    // JS to actually do the switch
    echo '<script>$(document).ready(function() {TabbedContent.gotab($("#' . $tab . '"))});</script>';
}
?>

Answer 1

您通过内联脚本解决方案将自己逼入绝境。您应该在整个产品中始终只有一个 $(document).ready... 调用，以避免代码中的顺序相关爆炸，并有一个明确的入口点。

也就是说，您快到了。不是调用函数，而是分配一个值。

echo "<script>var selectedTab=$tab;</script>"

然后在您的初始化函数中，使用该值。我的例子是在全局范围内。如果您尝试将其分配给命名空间，则可能会出现竞争条件。在这种情况下，请尝试将该脚本放在页面底部。

还有一个建议，让一个且只有一个函数处理该对象的所有动画调用。