dongshi2836 2012-05-20 15:57
浏览 29
已采纳

Jquery选项卡保持选项卡打开,这是url中的subid

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

  • 写回答

2条回答 默认 最新

  • ds355020 2012-05-20 16:11
    关注

    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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题