我正在使用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>
答案 0 :(得分:2)
您可以使用active选项设置默认标签
$('#mytab').tabs({
active: parseInt($.cookie('myactivetab'), 10) || 0
})
演示:Fiddle
注意:希望您使用cookie plugin