locked
how to use a direct link(href) to a specific jqueryUI tab? RRS feed

  • Question

  • User668774724 posted

    Hi All,
    I'm new to jqueryUI Tab.
    I have 3 tabs e.g
    News, Animals and Cities

    I would like to send a link to users so that when they click the link they would go straight to a specific tab e.g News.. See below link

    <a href="#News">News </a>

    I tried using the below but it doesn't work well. It seems it only works when the page is refreshed
    <a href="#News">News </a>I

    Is this achievable?

    Any ides would be appreciated

    Thursday, October 24, 2019 6:16 AM

Answers

  • User288213138 posted

    Hi naijacoder74,

    e.g if i send this link below to someone or use it like an hyperlink i would like it to load the page and select only the News tab. 

    You can try to use HTML5 data- attributes.

    The code:

    <script>
            $(document).ready(function () {
                $('#tabs').tabs();
                $('.open-tab').click(function () {             
                    $('#tabs').tabs("option", "active", $(this).data("tab-index"));
                });
            });
        </script>
    
    <form id="form1" runat="server">
            <a href="#description" class="open-tab" data-tab-index="0">Open News Tab</a>
            <a href="#video" class="open-tab" data-tab-index="1">Open Animals Tab</a>
            <a href="#video" class="open-tab" data-tab-index="2">Open Cities Tab</a>
            <div id="tabs">
                <ul>
                    <li><a href="#News">News</a></li>
                    <li><a href="#Animals">Animals</a></li>
                    <li><a href="#Cities">Cities</a></li>
                </ul>
                <div id="News">
                    This is new
                </div>
                <div id="Animals">
                    This is animal
                </div>
                <div id="Cities">
                    This is city
                </div>
            </div>
        </form>

    The result:

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 25, 2019 9:14 AM

All replies

  • User288213138 posted

    Hi naijacoder74,

    I would like to send a link to users so that when they click the link they would go straight to a specific tab e.g News.. See below link

    According to your description, I made demo for you.

    You can set the id of the tab to href.

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                $("#tabs").tabs();
            });
        </script>
    
    <div id="tabs">
                <ul>
                    <li><a href="#News">News</a></li>
                    <li><a href="#Animals">Animals</a></li>
                    <li><a href="#Cities">Cities</a></li>
                </ul>
                <div id="News">
                    This is new
                </div>
                <div id="Animals">
                    This is animal
                </div>
                <div id="Cities">
                    This is city
                </div>
            </div>

    The result:

    Best regards,

    Sam

    Thursday, October 24, 2019 8:39 AM
  • User-474980206 posted

    to make the above code use the bookmark its:

    $(function () {
       var options = windows.location.hash 
          ? {active: $('#tabs div').index(window.location.hash)}
          : {}
       $("#tabs").tabs(options);
    });
    

    Thursday, October 24, 2019 7:39 PM
  • User668774724 posted

    Thanks Samwu.
    I don't think you understood my question. I'm all good with the setting up and using jqueryui tab

    My question is how what would be the link  that i can use to target a specific tab

    e.g if i send this link below to someone or use it like an hyperlink i would like it to load the page and select only the News tab. 
    Does it make sense?

    <a href="#News">News</a>
    Thursday, October 24, 2019 10:54 PM
  • User668774724 posted

    Thanks Bruce.
    I tried the following 

    $(function () {
    var options = location.hash
    ? {active: $('#tabs div').index(location.hash)}
    : {}
    $("#tabs").tabs(options);
    //alert(location.hash);

    });

    i removed the window as i was getting an error.


    When i place the link below on a page

    <a href="#News">News</a>
    <a href="#animals">Animals</a>
    <a href="#Cities">City</a>

    and click on News for example the News changed and get selected but when i click the others nothing happens.

    Any ideas?

    Thursday, October 24, 2019 11:18 PM
  • User-474980206 posted

    The link names are case sensitive. You could make them all lowercase & covert the hash before lookup. If the bookmark is on the same page, then you should call the a variant of the function where the name is passed in.

    Friday, October 25, 2019 12:06 AM
  • User668774724 posted

    Hi Bruce,
    I'm new with this JqueryUI tabs.
    Can you please provide some snippet code how to? Especially in a scenario where the link is on the same page

    Thanks in Advance

    Friday, October 25, 2019 3:39 AM
  • User288213138 posted

    Hi naijacoder74,

    e.g if i send this link below to someone or use it like an hyperlink i would like it to load the page and select only the News tab. 

    You can try to use HTML5 data- attributes.

    The code:

    <script>
            $(document).ready(function () {
                $('#tabs').tabs();
                $('.open-tab').click(function () {             
                    $('#tabs').tabs("option", "active", $(this).data("tab-index"));
                });
            });
        </script>
    
    <form id="form1" runat="server">
            <a href="#description" class="open-tab" data-tab-index="0">Open News Tab</a>
            <a href="#video" class="open-tab" data-tab-index="1">Open Animals Tab</a>
            <a href="#video" class="open-tab" data-tab-index="2">Open Cities Tab</a>
            <div id="tabs">
                <ul>
                    <li><a href="#News">News</a></li>
                    <li><a href="#Animals">Animals</a></li>
                    <li><a href="#Cities">Cities</a></li>
                </ul>
                <div id="News">
                    This is new
                </div>
                <div id="Animals">
                    This is animal
                </div>
                <div id="Cities">
                    This is city
                </div>
            </div>
        </form>

    The result:

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 25, 2019 9:14 AM
  • User668774724 posted

    Thanks Samwu.
    Will give it a shot

    Monday, October 28, 2019 2:26 AM
  • User668774724 posted

    Thanks Samwu and it works. You are awesome

    The question I have for you though is when i click on the link it overlaps under my top menu and the whole tab hides under my top header menu(Although when i scroll down i can see the correct active tab is selected).
    I think this is because of the Hash# in the link.
    How can i fix this?

    Thanks in Advance

    Monday, November 4, 2019 5:13 AM
  • User288213138 posted

    Hi naijacoder74,

    The question I have for you though is when i click on the link it overlaps under my top menu and the whole tab hides under my top header menu(Although when i scroll down i can see the correct active tab is selected).
    I think this is because of the Hash# in the link.

    This is another question, please post your question in new thread.

    And I can't reproduce your question, please show me your code.

    Best regards,

    Sam

    Monday, November 4, 2019 5:47 AM
  • User668774724 posted

    No worries.
    Will try and post the issue. Basically the tabs are being used on a SharePoint site and its overlapping the header* The ribbon header)

    Wednesday, November 6, 2019 5:47 AM