Jquery选项卡保持选项卡打开，它是URL中的子选项 [英] Jquery tabs keep tab open that is subid in url
问题描述
我正在使用jquery选项卡，并试图在每一个分页，一切正常，但是，如果我点击进入下一页说第二个选项卡，它做得很好，但将我转移到第一个选项卡打开，所以你必须不断点击第二个标签来查看新的内容。我的问题是，我该如何做到这一点，以便当用户点击分页中的下一页时，内容会刷新，但同一个标签仍然打开。
关于如何将这个代码合并到我当前的代码中是使用url mail.php？page = 2& tid = 2 其中page = 2是分页的引用，可以正常工作，但我希望tid（tab id）使它成为打开的分页。 p>以下是您可能认识到的选项卡的JavaScript
$（document）.ready（function（）{
$ b $ //默认动作
$（。tab_content）。hide（）; //隐藏所有内容
$（ul.tabs li：first）。addClass（活动）。show（）; //激活第一个标签
$（。tab_content：first）。show（）; //显示第一个标签内容
//点击事件
$（ul.tabs li）。click（function（）{
$（ul.tabs li）。removeClass（active）; //移除任何active类
$（this）.addClass（active）; //将active类添加到选定的选项卡
$（。tab_content）。hide（）; //隐藏所有标签内容
var activeTab = $（this）.find（a）。attr（href）; //找到rel属性值来标识活动标签+内容
$（activeTab）.fadeIn（）; //淡入活动内容
return false;
}）;
}）;
标签的html（必须注释列表）
//< div id =tabsX> < div id =tabContent> < ul class =tabs>
//<！ - < li>< a id =allhref =＃allclass =all>全部< / a>< / li> - >
//< li>< a href =＃inboxclass =inbox>< / a>< / li>
//< li>< a href =＃outboxclass =outbox>< / a>< / li>
//< li>< a href =＃composeclass =compose>< / a>< / li>
//< li>< a href =＃trashclass =trash>< / a>< / li>
//
//< / ul>
AND标签内容的html（只显示一个没有内容的例子，因为会有）
< div id =inboxclass =tab_content>
< div id =inbox_headerstyle =display：table-cell; vertical-align：middle>
<！--- --- content --->
< / div><！--- end inbox_content --->
< / div><！--- end inbox --->
我真的很感谢任何帮助，因为我似乎无法为自己找到任何解决方案
您可以使用这里的以下函数捕获JavaScript中的 tid param
函数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（）; //激活第一个标签
$（。tab_content）。eq（tabIndex - 1）.show（）; //显示第一个标签内容
所以你完整 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（）{
//默认动作
$（。tab_content）。hide（）; //隐藏所有内容
var tabIndex = parseInt（getParameterByName（'tid'），10）;
if（！tabIndex）
tabIndex = 1;
$（ eq（tabIndex - 1）.addClass（active）。show（）; //激活第一个标签$ b $（。tab_content）。eq（tabIndex - 1）.show （）; //显示第一个标签内容
//点击事件
//在这里添加onlick代码
）};
我在<$中添加 -1 c $ c> eq ，因为它是基于 0的。在这里查看文档 $ .eq
i am using jquery tabs, and trying to get pagination in each one, everything works fine however, if i click to go to the next page on say the second tab, it does it fine, but transports me to the first tab open, so you have to keep clicking to the second tab to view the new content. My question is how can i make it so that when the user clicks the next page in the pagination, the content is refreshed but the same tab is left open.
My plan on how to incorporate this into my current code is to use the url mail.php?page=2&tid=2
Where the page=2 is reference for the pagination that works fine but i want the tid (tab id) to make it so that that tab is the open one.
Here is the javascript for the tabs you might recognise it
$(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;
});
});
And the html for the tabs (had to comment out for the lists)
//<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>
AND the html for the tab content (only showing one as an example with no content as there will be too much to show)
<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--->
I would really appreciate any help as i can't seem to find any solutions for myself
You can use the following function from here to catch the tid param in javascript
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, " "));
}
Then change your code like this
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
So you full js code would be
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
)};
I am adding -1 in eq because it's 0-based. Check the doc here $.eq
这篇关于Jquery选项卡保持选项卡打开，它是URL中的子选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
