locked
Can I use a dynamic parameter in jQuery UI tab url to target specific tabs instead of #hashtags RRS feed

  • Question

  • User668774724 posted

    Hi All,
    I'm using jquery U tab and i have successfully got it working below.But my problem i want to be able to send a link to users to load each specific tab differently e.g now i'm sending them a link (or using it in my navigation)

    http://test/news.aspx#News

    The issue is when they click the above for the fist time from a different page it works but when they now click for example to an Events Tab below

    http://test/news.aspx#Events 

    It doesn't do anything - (the link doesn't trigger or redirect to the Events tab).
    So the question is can i use something like this http://test/news.aspx?target=News with JqueryUI tabs?

    currently as you can see below i'm using the hashtag #News,#Events etc..which kinds of work but  not when used from one page to the other
    three tabs :

    <div id="tabs">
        <ul>
            <li><a href="#News">News</a></li>
            <li><a href="#Events">Events</a></li>
            <li><a href="#Bulletins">Bulletins</a></li>
        </ul>
    
        <div id="News">
            //Content placeholder
            <div id="newsTiles">
            </div>
        </div>
    
    
        <div id="Events">
            //Content placeholder
            <div id="EventsTiles">
            </div>
        </div>
    
    
        <div id="Bulletins">
            //Content placeholder
            <div id="BulletinsTiles">
            </div>
        </div>
    
    </div>

    Thanks in Advance

    Monday, June 29, 2020 6:07 AM

All replies

  • User-2054057000 posted

    Why not you can send the tab no to be open in the url like this:

    https://www.somewebsite.com/?tabno=tab2

    Then with URLSearchParams you find out the tabno value from query string.

    const urlParams = new URLSearchParams(window.location.search);
    const myParam = urlParams.get('tabno');

    So once you have the tabno value you can simply open it with jQuery.

    You can also see - How to use jQuery Tabs feature

    Monday, June 29, 2020 9:56 AM
  • User668774724 posted

    Thanks yogyogi for the repl
    But  do i implement this with https://jqueryui.com/tabs/ ?

    Tuesday, June 30, 2020 1:12 AM
  • User-2054057000 posted

    I did not think that it can be implemented with the jQueryUI feature. The link i gave you also contains a simple implementation of jQuery Tabs feature. It is easy to use check that out.

    Tuesday, June 30, 2020 12:44 PM