Post UI Tabs
[resolved] External link to tab? (6 posts)

  1. protohominid
    Posted 3 years ago #

    I'd like to create a custom button on the page that links to a particular tab. I tried linking to the corresponding tab's anchor (e.g. "#tabs-1-2") but that didn't work. Do I need some custom jQuery to do it, and if so, what would be the best way?



  2. Mark / t31os

    Plugin Author

    Posted 3 years ago #

    Tabs can be loaded specifically when landing on a page, that's part of the tabs functionality, but will not work with the "Set active tab" option enabled. In addition to that, selecting the active tab only works for the first time you land on the page and applicable anchor(it won't switch tab using the anchors for any additional anchor references - that's specific to the tabs script, not the plugin).

    You could, as you've suggested, switch tabs using jQuery and calling the active tab setter.

    		$('#tabs-n').tabs( 'option', 'active', 0 ); // Selects the first tab

    Where n in the tabs selector refers to the tabs instance, in your above example the n refers to 1.

    The 0 in the tabs third argument refers to the key of the tab to select, the index starts at zero, first tab is 0, second is 1 and so on.

    Hope that helps. :)

  3. protohominid
    Posted 3 years ago #

    That helps a lot, thanks Mark!

  4. Mark / t31os

    Plugin Author

    Posted 3 years ago #

    Happy to help.. :)

  5. protohominid
    Posted 3 years ago #

    Follow up question: When my custom link to a tab is clicked, the browser is scrolling to a position just below the anchor (in this case, the tab's anchor tag). Seems like the expected behavior would be to scroll to the top of the anchor, so you can see the tabs. Any idea what's going on, and how I might fix?

  6. Mark / t31os

    Plugin Author

    Posted 3 years ago #

    I've noticed the same behaviour, i'm not sure if that's do with default anchor functionality, jquery ui/tabs or whether that's related to my coding, but it's one minor issue i've noticed in testing to.

    I'll let you know more if i manage to pin down the reasoning behind the weird anchor positioning.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Post UI Tabs
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.