0

我正在使用 jquery 选项卡，并尝试在每个选项卡中进行分页，但一切正常，但是，如果我单击以转到第二个选项卡上的下一页，它可以正常工作，但会将我传送到打开的第一个选项卡，所以您必须继续单击第二个选项卡才能查看新内容。我的问题是如何做到这一点，以便当用户单击分页中的下一页时，内容会刷新但相同的选项卡保持打开状态。

我关于如何将其合并到我当前代码中的计划是使用 urlmail.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--->

我真的很感激任何帮助，因为我似乎无法为自己找到任何解决方案

4

2 回答 2

2

您可以从此处使用以下函数来捕获tidjavascript 中的参数

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


  )};

我加入-1是eq因为它是0-based. 在此处查看文档$.eq

于 2012-05-20T16:11:44.940 回答
0

我建议查看 jquery 选项卡的文档。您可以使用许多选项。cookie 选项：

$( ".selector" ).tabs({ cookie: { expires: 30 } });

将最新选择的选项卡存储在 cookie 中。如果未定义所选选项，则使用 cookie 确定最初选择的选项卡。需要 cookie 插件，该插件也可以在下载构建器的 development-bundle>external 文件夹中找到。该对象需要具有 cookie 插件期望作为选项的形式的键/值对。可用选项（示例）：{ expires: 7, path: '/', domain: 'jquery.com', secure: true }。从 jQuery UI 1.7 开始，还可以通过 name 属性定义正在使用的 cookie 名称。

此外，您可以使用选定的选项。这使您可以指定在初始化时应打开哪个选项卡：

$( ".selector" ).tabs({ selected: 3 });

第三个选项是通过 ajax 调用加载选项卡的内容。

于 2012-05-20T16:53:21.490 回答