Jquery 选项卡使 url 中的子 ID 选项卡保持打开状态
Jquery tabs keep tab open that is subid in url
我正在使用jQuery选项卡,并尝试在每个选项卡中进行分页,一切正常但是,如果我单击以转到下一页,例如第二个选项卡,它做得很好,但是将我传输到打开的第一个选项卡,因此您必须继续单击第二个选项卡才能查看新内容。我的问题是我怎样才能做到这一点,以便当用户单击分页中的下一页时,内容会刷新,但相同的选项卡保持打开状态。
关于如何将其合并到我当前的代码中,我的计划是使用 url mail.php?page=2&tid=2
其中 page=2 是工作正常的分页的参考,但我希望 tid(选项卡 ID(使该选项卡成为打开的选项卡。
这是您可能认识的选项卡的 JavaScript
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
和选项卡的html(必须注释掉列表(
//<div id="tabsX"> <div id="tabContent"> <ul class="tabs">
// <!--<li><a id="all" href="#all" class="all">All</a></li>-->
// <li><a href="#inbox" class="inbox"></a></li>
// <li><a href="#outbox" class="outbox"></a></li>
// <li><a href="#compose" class="compose"></a></li>
//<li><a href="#trash" class="trash"></a></li>
//
// </ul>
和选项卡内容的 html(仅显示一个示例,没有内容,因为要显示的内容太多(
<div id="inbox" class="tab_content">
<div id="inbox_header" style="display:table-cell; vertical-align:middle">
<!---content--->
</div><!---end inbox_content--->
</div><!---end inbox--->
我真的很感激任何帮助,因为我似乎无法为自己找到任何解决方案
你可以从这里使用以下函数来捕获javascript中的tid
参数
function getParameterByName(name)
{
name = name.replace(/['[]/, "'''[").replace(/[']]/, "''']");
var regexS = "[''?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/'+/g, " "));
}
然后像这样更改您的代码
var tabIndex = parseInt(getParameterByName('tid'),10);
$("ul.tabs li").eq(tabIndex - 1).addClass("active").show(); //Activate first tab
$(".tab_content").eq(tabIndex - 1).show(); //Show first tab content
所以你完整的js
代码将是
function getParameterByName(name)
{
name = name.replace(/['[]/, "'''[").replace(/[']]/, "''']");
var regexS = "[''?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/'+/g, " "));
}
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
var tabIndex = parseInt(getParameterByName('tid'),10);
if(!tabIndex)
tabIndex = 1;
$("ul.tabs li").eq(tabIndex - 1).addClass("active").show(); //Activate first tab
$(".tab_content").eq(tabIndex - 1).show(); //Show first tab content
//On Click Event
// add you onlick code here
)};
我在eq
中添加-1
,因为它很0-based
.在此处查看文档 $.eq
我建议查看jquery选项卡的文档。您可以使用许多选项。饼干选项:
$( ".selector" ).tabs({ cookie: { expires: 30 } });
将最新选定的选项卡存储在 Cookie 中。然后,如果未定义所选选项,则使用 Cookie 确定最初选择的选项卡。需要 cookie 插件,也可以在下载构建器的开发捆绑>外部文件夹中找到。该对象需要具有 cookie 插件期望作为选项形式的键/值对。可用选项(示例(:{ 过期:7,路径:"/",域:"jquery.com",安全:真 }。从jQuery UI 1.7开始,也可以通过name属性定义正在使用的cookie名称。
此外,您可以使用所选选项。这使您可以指定初始化时应打开的选项卡:
$( ".selector" ).tabs({ selected: 3 });
第三个选项是通过 ajax 调用加载选项卡的内容。
- 使用纯javascript而非jquery使所选选项卡处于活动状态并保持非活动状态
- 我如何为列出的选项卡元素编写一个Protractor测试,它会检查它是否's是否处于活动状态
- Angular+bootstrap ui,检查当前选项卡是否已处于活动状态
- Selectbox选项在页面刷新jsp后保持选中状态
- 单击我网站中的链接时打开新选项卡,保持当前选项卡处于活动状态
- JQuery UI 1.11 将选项卡设置为活动状态
- 页面刷新后,所选选项卡处于非活动状态
- 使第二个选项卡处于第一个活动状态
- 如何使单选按钮在选择一个选项(CSS)后显示为选中状态
- 如何在浏览器页面切换到我的网站选项卡时创建事件,如gmail中的聊天框状态更改
- 使选项卡处于活动/非活动状态未显示正确的数据
- 当选项卡处于活动状态时,更改子(孙)类
- Angularjs :动态创建的选项卡不会处于活动状态/选中状态
- 如何创建具有空白选项和未筛选状态的动态选择字段
- 在加载新页面时保持选项卡永久处于活动状态
- Boostrap和Angular:同时保持两个选项卡处于活动状态
- JQuery/Grails 将多个选项/值标记为在多个选择框中处于选中状态
- 画布的奇怪行为 上下文变量定义位置导致选项卡处于非活动状态时画布呈现冻结
- 将焦点设置在带有错误消息的第一个输入元素上,并将包含它的 TabStrip 选项卡设置为活动状态
- 离子选项卡视图 状态提供程序空白视图