Question

我很难找到这个问题的解决方案几个小时，但无论我做什么似乎都没有效果（就像我对javascript / jquery的了解一样）。所以我有这个jquery脚本在搜索表单中切换标签，代码如下：

<ul id="tabs">
    <li><a href="#" name="tab1">T1/a></li>
    <li><a href="#" name="tab2">T2</a></li>
</ul>

<div id="content"> 
    <div id="tab1">
    TAB 1 CONTENT
    </div>

    <div id="tab2">
    TAB 2 CONTENT
    </div>
</div>

和THE JQUERY CODE：

$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });
});

我尝试使用tab div名称添加class =“current”，但也没有任何效果。我想也许这个点击功能只能在点击时接受当前标签的更改，但是我想让它自动生成，所以当第二个标签处于活动状态时，它会根据我提供的“当前”类保持活动状态。我的情况是这样的：第一个选项卡从英语搜索到意大利语，第二个选项卡从意大利语搜索到英语，但是当我选择第二个选项（It to En）并且页面刷新以显示结果时，第一个选项卡被选中，因此如果用户想要搜索2次或更多次（从意大利语到英语）他必须一遍又一遍地选择第二个标签。

如果我可以使jquery检测到'当前'类，我可以添加一些php来检查url参数并正确激活正确的选项卡。例：如果search.php？lang = it_to_eng，我将'current'class添加到第二个标签，反之亦然。

提前谢谢。

Answer 1

http://jsbin.com/ebomej/1/edit

$(document).ready(function() {
    $("#content div").hide().eq(0).show(); // show first one
    $("#tabs li").eq(0).addClass('current'); // set active one


    $('#tabs a').click(function(e) {
        e.preventDefault();
        if( $(this).closest("li").hasClass('current') ){ //detection for current tab
         return;      
        }else{             
            $("#content div").hide(); //Hide all content
            $("#tabs li").removeClass('current');
            $(this).parent().addClass('current'); // Activate this
            $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });
});

Answer 2

您似乎必须使用 jquery.cookie 才能执行此操作。我修改了你的代码如下：

$(document).ready(function() {

    var cookieName = 'tab_of';
    var cookieTab = 'tab';
    var cookieOptions = {expires: 7, path: '/'};

    $("#content div").hide(); //Hide all content        
    $("#" + $.cookie(cookieName)).addClass("current");
    $("#" + $.cookie(cookieTab)).fadeIn();
    if($.cookie(cookieName) == null){
        //alert($.cookie(cookieName));
        $("#tabs li:first a").attr("class","current"); // Activate first tab
        $("#content div:first").fadeIn(); // Show first tab content
    }

    $("#tabs a").click(function(e){
        e.preventDefault();
        $("#content div").hide(); //Hide all content
        $("#tabs li a").removeClass("current");
        $("#" + $.cookie(cookieName)).removeClass("current");
        $.cookie(cookieName, $(this).attr("id"), cookieOptions);
        $("#" + $.cookie(cookieName)).addClass("current");
        $.cookie(cookieTab, $(this).attr('name'), cookieOptions);
        $('#' + $.cookie(cookieTab)).fadeIn();
    });
});

每次重新加载页面时，标签位置将基于所选的最后位置。在这里查看演示：http://jsfiddle.net/ongisnade/597HR/

NEW UPDATE：

如果您希望在用户退出浏览器时会破坏会话cookie。改变这一行：

var cookieOptions = {expires: 7, path: '/'};

到

var cookieOptions = {path: '/'};

新修补更新：

我在$("#tabs li a").removeClass("current");

之上添加了此代码$("#" + $.cookie(cookieName)).removeClass("current");

请清除浏览器缓存并重新加载页面。点击此处查看演示：http://jsfiddle.net/ongisnade/597HR/1/

菜单上的jquery活动选项卡

2 个答案: