jQuery tabs reloading

Question

As i am newbie to jQuery so i am doing the simple exercises. I have done the simple tabs.

I am trying with the location.reload() function.

Here is my code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tabs</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
    <body>

    <div class="container">
        <h2>Tabs Testing</h2>
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#menu1">Tab1</a></li>
            <li><a data-toggle="tab" href="#menu2">Tab2</a></li>
            <li><a data-toggle="tab" href="#menu3">Tab3</a></li>
            <li><a data-toggle="tab" href="#menu4">Tab4</a></li>
        </ul>

            <div class="tab-content">
                <div id="menu1" class="tab-pane fade in active">
                    <h3>Menu 1</h3>
                        <p> This is tab one</p>
                </div>
                <div id="menu2" class="tab-pane fade">
                    <h3>Menu 2</h3>
                        <p>This is tab two</p>
                </div>
                <div id="menu3" class="tab-pane fade">
                    <h3>Menu 3</h3>
                        <p>This is tab three</p>
                        <button type="submit" class="btn btn-primary" onclick="myFunction()">Reload Page</button>
                </div>
                <div id="menu4" class="tab-pane fade">
                    <h3>Menu 4</h3>
                        <p>This is tab four</p>
                </div>
            </div>
        </div>
        <script>
            function myFunction() {
                location.reload();
            }
        </script>
    </body>
</html>

So in the Tab3 i inserted a button, with the you can see i wrote the simple js function, by invoking that function it will reload the page.

So here is where i stuck, when the page reloads I am trying to keep selected tab active i.e. Tab3. But after the reload it will be the Tab1 active.

So i have checked the other questions and answers but i found it complex to understand.

Any help that will be helpful. Thanks in advance.

Possible duplicate of [Remember which tab was active after refresh](http://stackoverflow.com/questions/4299435/remember-which-tab-was-active-after-refresh) — Mike Cluck, Oct 29 '15 at 18:18
Use this plugin: https://github.com/aidanlister/jquery-stickytabs. While I'm not a fan of using plugins for little things, I think it's totally okay to use them when you're starting out. — galdin, Oct 29 '15 at 18:51

score 1 · Accepted Answer · answered Oct 29 '15 at 19:25

The reason it doesn't work is because the browser doesn't know it's supposed to show you that particular tab after it reloads. One way to show a particular section of the site is to use the location hash.

$(function() {
    // get the current hash
    var hash = document.location.hash;

    // open the appropriate tab if a hash exists
    if (hash) {
        $('.nav-tabs a[href='+hash+']').tab('show');
    }

    // Update the hash each time the tab is shown
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        window.location.hash = e.target.hash;
    });
});

If you'd prefer to keep things simple, this solution uses this plugin.

Download this file and add it to your scripts: https://raw.githubusercontent.com/aidanlister/jquery-stickytabs/master/jquery.stickytabs.js

GitHub doesn't like hotlinking, so don't hotlink.

Add this below myFunction():

$(function() {
    $('.nav-tabs').stickyTabs();
});

@abhishek well then, you're clearly doing something wrong. Download the file here and let me know if it works: http://pastebin.com/CiNknL1r — galdin, Oct 29 '15 at 22:21

score 0 · Answer 2 · answered Oct 29 '15 at 18:56

0

Give different Id for all four tags.Then write same onclick function with there id's : onClick ="myFunction(id)"And your jquery is:

function myFunction (id) {
 $("id").addClass('active'); 

 }

answered Oct 29 '15 at 18:56

Kunjan Shah

86
9

Mi-Creativity · Answer 3 · 2015-10-30T00:12:58.097

0

Update: add id="loadIt" attribute to the button like this:

<button id="loadIt" type="submit" class="btn btn-primary">Reload Page</button>

Then try this snippet:

<script>
    var url, id;
    $('#loadIt').on('click', function(event) {
        event.preventDefault();
        url = window.location.href;
        id = ((/#menu/).test(url)) ? "" : '#' + $(this).closest('div').attr('id');
        // console.log(url + id);
        window.location.replace(url + id);
    });
</script>

JSFiddle Hopefully it'll work.

edited Oct 30 '15 at 00:12

answered Oct 29 '15 at 18:57

Mi-Creativity

9,554
10
38
47

@abhishek, I've updated the code above, it works for me *as far as I tested it* I hope it'll work for you too – Mi-Creativity Oct 29 '15 at 22:16

jQuery tabs reloading

3 Answers3