specify tab name in the URL

In one my MVC application , in a specific page i have the following tabs

<div id="tabs" style="clear: both;">
                        <ul>
                            <li><a href="#Tab1">tab1</a></li>
                            <li><a href="#Tab2">tab2</a></li>
                            <li><a href="#Tab3">tab3</a></li>
                            <li><a href="#Tab4">tab4</a></li>
                        </ul>

</div

My question here is when i entered the URL like below it should redirect me to the specific tab

https://someurl/#Tab4 ----> it should redirect me to the tab 4 but instead of that it is always pointing me to the Tab1 by default .

Can somebody please help here ?

Answers 1

  • The solution you have in your question will send you to the correct URL but there is no handling of the #tab4 in your html...

    Usually the browser will adjust the view of the page to show the element with ID 'tab4' however if you have a normal tab system, tab 4 is going to be hidden by default. You need to have some Jquery plugin or write your own Jquery that will Hide the current Tab content and display the new tab content.

    So to fix this, you need to add an ID to each of your tabs

    <li><a href="#Tab1" id="Tab1">tab1</a></li>
    

    This way the browser will know where it needs to navigate to.

    Then you also need to create an event listener with Jquery so that when you click on a tab link it will know that you want to move from one tab to another.

    This will be along the lines of:

    $(document).ready(function () {
            $('#tabs>ul>li>a').on('click', function () {
                //hide all of the content from all of the tabs
                $('.tab-content').hide();
                //show just the content from the child of the tab
                //you may need to adjust the selector to point to the actual path to find the content for the tab.
                $(this).children('.tab-content').show();
            });
    });
    

Related Articles