Retain open tab after page refresh / bootstrap

Question

I have this code which shows two menus in two tabs, How do I stop the currently open tab from resetting after a page refresh?

<script type="text/javascript">
                            $(document).ready(function(){
                                $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
                                    localStorage.setItem('activeTab', $(e.target).attr('href'));
                                });
                                var activeTab = localStorage.getItem('activeTab');
                                if(activeTab){
                                    $('#subtabs a[href="' + activeTab + '"]').tab('show');
                                }
                            });
                            </script>

                        <ul id="subtabs" class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#artists" aria-controls="artists" role="tab" data-toggle="tab">Artists</a></li>
                            <li role="presentation"><a href="#subjects" aria-controls="subjects" role="tab" data-toggle="tab">Subjects</a></li>
                        </ul>

                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="artists">
                                <ul> 
                                <?php $loop = new WP_Query(array( 'post_type' => 'artist', 'posts_per_page' => -1 )) ; while ($loop->have_posts()) : $loop->the_post(); ?>

                                    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

                                <?php endwhile; ?>
                                </ul>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="subjects">
                                <ul>
                                <?php $tax_terms = get_terms('subject');

                                    foreach($tax_terms as $term) {

                                        $term_link = get_term_link($term);

                                        if (is_wp_error($term_link)) {
                                            continue;
                                        } ?>

                                        <li><a href="<?php echo esc_url($term_link); ?>"><?php echo $term->name; ?></a></li>   

                                <?php } ?>
                                </ul>
                            </div>
                        </div>

sridhar · Accepted Answer · 2017-03-22T10:22:10.413

2

The easiest way to achieve this would be using localStorage. Every time you click on the tab list just add it to localstorage and on reload get the item and that specific class to that particular tab which would make it active.

Here is the link from tutorialrepublic: http://www.tutorialrepublic.com/codelab.php?topic=faq&file=bootstrap-keep-last-selected-tab-active-on-page-refresh

edited Mar 22 '17 at 10:22

answered Mar 22 '17 at 10:15

sridhar

612
5
12

Not sure why the downvote... maybe flesh out the answer with an example.. I would of suggested this too, or possibly the use of a cookie – Dale Mar 22 '17 at 10:18
Why the downvote? – sridhar Mar 22 '17 at 10:24
This looks like the solution, I have tried it and still no luck, I have updated my question with this solution in mind. – Brad Fletcher Mar 22 '17 at 10:30
Hey @BradFletcher, I checked it and it works. – sridhar Mar 22 '17 at 11:03
check this link: https://jsfiddle.net/reddysridhar53/orr9aoor/1/ – sridhar Mar 22 '17 at 11:08
I got it working, I had to move the jquery.js and bootstrap.js to the header from the footer. – Brad Fletcher Mar 22 '17 at 11:10

Retain open tab after page refresh / bootstrap

1 Answers1