0

我正在使用 JQuery tabs()。我正在使用 cookie 来保存选定的选项卡。
在这里，目的是即使在页面刷新后也保持所选选项卡处于活动状态（以及所有其他选项卡处于禁用状态）。

选项卡值保留在 cookie 中，但与该选项卡对应的数据仅在单击事件触发后才会附加。所以，我想在页面刷新后生成点击事件。

                var category = $.cookie("category");//consists selected tab

            jQuery(document).ready(function() {
                var url = window.location.search.substring(1).split("&");
                var paramValues;
                var params = [];
                for (var i = 0; i < url.length; i++) {
                    paramValues = url[i].split("=");
                    params.push(paramValues);
                }
                id = params[0][0];
                type = params[1][1];
                subtype = params[2][1];
                getListOfDocs(id, category, type, subtype);//get the data from db append it to the html element
                $("#tabs").tabs();  
                $(".dtls").click(function(e) {
                    category = $(this).html();
                    $.cookie("category", category);
                    getListOfDocs(id, category, type, subtype);
                    $("li[class*='category']").removeClass("ui-state-active");
                    $("li[class*='category']").removeClass("ui-tabs-active");
                    $("li[class='categorynws']").removeClass("ui-state-default");//categorynws isclass of first tab
                    $(".category" + $.cookie('category')).addClass("ui-state-active");
                });
            }

            function getListOfDocs(id, category, type, subtype) {
                //ajax call
                success : function(data){//inside success parameter of ajax
                    $("#" + category).html(data[0]);//                  
                    console.log($("#" + category).html());//it results required data,but not displayed in browser

                }
            }

            <html>
                <body>
                                    <div id="tabs">
                                <ul id="ulid" class="tabs">
                                    <li class="categorynws">
                                        <a href="#nwsTab" title="nws Details" id="nwsdtls" class="dtls">nws</a>
                                    </li>
                                    <li class="categoryann">
                                        <a href="#annTab" title="ann Details" id="anndtls" class="dtls">ann</a>
                                    </li>
                                    <li class="categoryvdo">
                                        <a href="#vdosTab" id="vdodtls" class="dtls">vdo</a>
                                    </li>
                                    <li class="categoryimgs">
                                        <a href="#imgsTab" title="imgsList" id="imgsdtls" class="dtls" >imgs</a>
                                    </li>
                                    <li class="categoryMoviemkng">
                                        <a href="#mkngTab" title="mkng Of this Movie" id="moviemkngdtls" class="dtls">Moviemkng</a>
                                    </li>
                                    <li class="categorytinfo">
                                        <a href="#tinfoTab" title="Trade Information of a Movie" id="tinfodtls"  class="dtls">tinfo</a>
                                    </li>
                                </ul>
                                <!--Add button-->
                                <a href="mvs.html?mvs" role="button" class="btn  pull-right" title="It will navigate you to the mvs list" id="mvsList">mvs</a>
                                <a href="#" role="button" class="btn  pull-right" title="You can add here" id="addMore">Add</a>

                                <div id="nwsTab" class="tabs">
                                    <div id="nws"></div>
                                </div>
                                <div id="annTab" class="tabs">
                                    <div id="ann"></div>
                                </div>
                                <div id="tvdoTab" class="tabs">
                                    <div id="tvdo"></div>
                                </div>
                                <div id="vdosTab" class="tabs">
                                    <div id="vdo"></div>
                                </div>
                                <div id="imgsTab" class="tabs">
                                    <div id="imgs"></div>
                                </div>
                                <div id="mkngTab" class="tabs">
                                    <div id="Mvemkng"></div>
                                </div>
                                <div id="tinfoTab" class="tabs">
                                    <div id="tinfo"></div>
                                </div>
                            </div>
                    </body>
                </html>
4

1 回答 1

2

您可以使用active选项来设置默认选项卡

$('#mytab').tabs({
    active: parseInt($.cookie('myactivetab'), 10) || 0
})

演示：小提琴

注意：希望您使用的是cookie 插件

于 2013-08-07T10:08:46.493 回答