jQuery Tabs - getting selected tab on page reload

Question

I'm using the jQuery Tabs function from jqueryfromdesigners, but only the first example works for me. That's the script-code I use:

    <script type="text/javascript" charset="utf-8">
$.noConflict();
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();
        });
    </script>

And here's the demo-code for displaying the tabs:

<div class="tabs">
  <!-- tabs -->
  <ul class="tabNavigation">
    <li><a href="#first">Send a message</a></li>
    <li><a href="#second">Share a file</a></li>
    <li><a href="#third">Arrange a meetup</a></li>
  </ul>

  <!-- tab containers -->
  <div id="first">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="second">
    <p>Sed do eiusmod tempor incididunt.</p>
  </div>
  <div id="third">
    <p>Ut enim ad minim veniam</p>
  </div>
</div>

I have already changed the code for my use. In the tab-content-divs are now displayed informations which I grab via php. This content has many links in it that reloads the page when clicked.

How can I achieve that when the user clicks on a link in #tab2 the page reloads and displays the last selected #tab2? Now it always shows #tab0...

I would appreciate any hint on this!

Sethunath K M · Answer 1 · 2012-05-05T16:31:31.977

0

You need to add a hash tag with the url and on page load you can access the hash using window.location.hash . Based on the hash tag , you can make the corresponding tab selected

So in your case a simple woraround would be

$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     return false;

});

edited May 05 '12 at 16:31

answered May 05 '12 at 16:26

Sethunath K M

4,702
3
28
42

Hi Sethunath! Thx for you quick reply! So I have implemented your code directly under my script-code and tried to access the site like this: http://www.xyz.com/site.html?#second But still the first tab is shown... – profilneurotiker May 05 '12 at 16:36
You should put the code inside $(document).ready(function(){ after .filter(':first').click(); . That might help – Sethunath K M May 06 '12 at 17:49
Thx again Sethunath...but I don't get it...please take a look at answer #3, where I've explained what I've tried so far... – profilneurotiker May 08 '12 at 12:22

score 0 · Answer 2 · answered May 05 '12 at 16:31

0

You can use with cookie

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

answered May 05 '12 at 16:31

coder

13,002
31
112
214

Hi coder! Thx for your reply, too! I'm hoping to get this to work without implementing another plugin/script, like the one you've linked to. But if nothing else will work I'll give it a try! – profilneurotiker May 05 '12 at 16:49

profilneurotiker · Answer 3 · 2012-05-08T12:30:24.180

Thx again for your reply!

I tried several variations, but nothing worked...

If I use the following code, where I implemented the first code from you below my tab-script in a separate call nothing happens:

    <script type="text/javascript" charset="utf-8">
$.noConflict();
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();
        });
    </script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     return false;

});
</script>

I choose a tab (for example tab#3), click on a link, the site reloads I still get displayed tab#1...

2nd version I tried:

    <script type="text/javascript" charset="utf-8">
$.noConflict();
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();
        });
    </script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     return false;

});
</script>

Same as before, the site reloads and shows tab#1...

With the third version the tabs are all hidden, I first need to click on a tab to get it displayed...

    <script type="text/javascript" charset="utf-8">
$.noConflict();
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();


$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     return false;
});

});
</script>

On click and site-reload the tabs are hidden again...

It would be great if you could take another look at this. I don't know what to do to get this running...

Cheers!

Ok, now I got it! I placed the hash-tag wrong inside the url, so now it works...but there's still one little problem left...when the user visits the site first no hash-tag is given. How can I say "if hash-tag is empty then choose tab#1"? also the css-state is not active, whether on page-reload or first-visit, only if I click on a tab the css-class "selected" is active... — profilneurotiker, May 08 '12 at 13:25

jQuery Tabs - getting selected tab on page reload

3 Answers3