Question

我正在尝试修改Gaya Design的选项卡式内容（Available Here），以便在重新加载页面时保持当前选项卡，但在单击新选项卡时更改它。我已经更改了一点，以便能够使用PHP GET变量更改默认标签。我正在处理的页面的当前状况可以查看here。

所以这是我可能的情况。如果你点击上面的链接，你会看到我正在使用一个简单的PHP购物车。现在，当用户单击添加链接时，它必须重新加载页面，当它执行此操作时，它会重置选项卡。所以，我认为这应该很容易通过一个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>"

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

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

Answer 2

您可以使用哈希，而不是使用get / post params;在标签中创建这样的链接：

<a class="tab_item" href="#one_go" id="one">

然后把它放在javascript中：

var gototab = document.location.hash.replace('_go',"")
if(gototab){
    $(gototab).each(function(){ 
        var pos = $(this).prevAll(".tab_item").length,
            left = pos * $(this).outerWidth(),
            margin = pos * $(this).parent().parent().find(".slide_content").width() * -1;
        $(this).parent().find('.moving_bg').css('left',left)
        $(this).parent().parent().find(".tabslider").css('margin-left',margin)
    })
}

重新加载页面时使标签保持不变

2 个答案: