1

我一直在努力寻找解决方案几个小时，但无论我做什么似乎都不起作用（我对 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>

和 JQUERY 代码：

$(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
        }
    });
});

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

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

先感谢您。

4

2 回答 2

0

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
        }
    });
});
于 2012-09-30T23:14:09.797 回答
0

看来您必须使用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/

新更新：

如果您希望会话 cookie 在用户退出浏览器时被销毁。更改此行：

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

到

var cookieOptions = {path: '/'};

新的修复更新：

$("#tabs li a").removeClass("current");我在上面添加了这段代码$("#" + $.cookie(cookieName)).removeClass("current");

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

于 2012-10-01T02:49:55.690 回答