使用ASP.NET Webforms在另一页上打开特定选项卡

Question

I have a webforms website and I am using Bootstrap. I have a few links in my footer that will link to various tabs on different pages. My problem is that no matter what tab I specify the link to open, they only load the page with the default tab.

I've done this several times with static sites, but never with ASP.NET. I believe the problem lies with ASP.NET adding the .aspx to the end of each page.

Here is what I tried:

<a href="/Personal-Banking.aspx#checking">Checking Accounts</a>

So, the page I'm linking to is Personal-Banking.aspx and the Id of the tab I'm wanting to open is #checking. All this is doing now is opening the Personal-Banking page and opening the default tab, which is different than the #checking tab.

I've tried removing the .aspx but it still does not open correctly and the images are all broken.

Thanks for the help.

Answer 1

Inspect the page that you link to, look at the source of the webpage on your browser when you get to it. Is the ID of that tab really "checking" , or is it something else like "MainContent_TabbedPanel_checking" ?

Don't look at your code, look at what your browser is getting.

Answer 2

Here is the code used to get linking to tabs to work in asp.net webforms:

<!--Update this to reflect tabs on this page-->
    <script type="text/javascript">
        $(function () {
            var loc = window.location.href; // returns the full URL
            if (/pipe/.test(loc)) {
                $('.pipe').addClass('active');
                $('#pipe').addClass('active');
            }
            else if (/manholes/.test(loc)) {
                $('.manholes').addClass('active');
                $('#manholes').addClass('active');
            }
            else if (/fittings/.test(loc)) {
                $('.fittings').addClass('active');
                $('#fittings').addClass('active');
            }
            else if (/tanks/.test(loc)) {
                $('.tanks').addClass('active');
                $('#tanks').addClass('active');
            }
            else {
                $('.pipe').addClass('active');
                $('#pipe').addClass('active');
            }
        });
    </script>