FANDOM


  • Suppose I have a page that only consist of tabber with several tabs (e.g. Tab 1, Tab 2, Tab 3), each tabs has different contents on them.

    Now I want to create a link to the page. But instead of the first tab (Tab 1), I want it to automatically shows/switches to Tab 2 (or Tab 3) when accessed through that particular link. Is there any way to do this?

      Loading editor
    • Something like this ought to work.

      $(function() {
         if (wgPageName !== 'Name_of_Page_With_Tabber_On_It')
            return;
      
         var hash = (window.location.hash).replace('#', '');
      
         switch (hash) {
            case 'link1': return changeTab(1);
            case 'link2': return changeTab(2);
            case 'link3': return changeTab(3);
         }
      
         function changeTab(tab) {
             // Assuming there is only one tabber on the page
            $('.tabberlive')[0].tabber.tabShow(tab);
         }
      });
      
        Loading editor
    • 452

      You're right that it ought to, but the tabber extension generally loads after the rest of the page (if it doesn't fail completely), so that would run before the tabber script loads, so the tabShow function wouldn't exist. (I'm unsure why it isn't bundled with the resource loader.)

      I ran into this problem myself last week writing a "pick a random tab" script.

      Here's my solution merged with Spottra's solution:

       tabberOptions = {
         onLoad: function() {
           if (window.location.hash) {
             var hash = (window.location.hash).replace('#', '').replace(/_/g, ' ');
             var currentTabber = this;
             $(".tabbernav li a", this.div).each(function(i) { 
               if ($(this).attr("title") === hash ) currentTabber.tabShow(i);
             });
             delete currentTabber;
           }
         }
       };
      
      

      I've tested it out, and it works perfectly for me. (It could probably be written to be a little neater.)

      The onLoad function runs for each tabber on the page, so if there are multiple tabbers with the same tab name, it will switch to all of them.

      This is a great idea, Aeris Ventaile!

      edited to convert underscores to spaces
      edited to check whichtab was set

      Edit: I tried to find a way to get rid of "whichtab" completely, but I couldn't figure it out, maybe someone else can.

      edit: whichtab removed, replaced by currentTab.

        Loading editor
    • So, if the name of the tab that would be loaded automatically is "Tab 2", then the link to the page would be [[PAGENAME#Tab 2]]. Is it right?

        Loading editor
    • 452

      That's right. The link will be rendered as /wiki/PAGENAME#Tab_2 - but that's what the replace("_", " "); is for. :)

      Also, I've updated the script a little, there's no real difference though.

        Loading editor
    • Thanks for the solution. I'll try it right now, might be little hard though since I never worked with custom JS.

      Edit: Seems it still not working for me, either that or I implemented the script in a wrong way.

      Here's the global script and the page that I use for testing. Added #Free_Card_Version on the page URL, but it it still shows the first tab after successful load.

        Loading editor
    • @452 Similarly to the original request, is there a way to link to tabs via tabview?

        Loading editor
    • 452

      Aeris Ventaile: please remove "function" from before "tabberOptions = {".

      DEmersonJMFM - Probably, but differently implemented. It was easy for me to do it for tabber, since I did most of the legwork last week.

      Here's the tabview js - it's loaded the same way as tabber - as a separately loaded js file and not through the resource loader - but I've never personally seen tabview fail to load, but I see tabber fail to load fairly regularly - I'm unsure what's up with that :/

      Also, I'm unsure what is calling TabView.init() :/

      There doesn't appear to be a callback function like tabberOptions.onLoad, so it would have to be implemented as a window. load function - which may or may not run before TabView is loaded.

      edit: BTW, there is a built-in way to select the default tab: Help:Tab_view#Preset_an_open_tab, but I know that's not what you were asking.

        Loading editor
    • Hmm, removed the "function" parameter, clear the browser cache and reload the JS, but it seems that the link still won't load the correct tab.

      I wonder if I missed something, either the script or the page itself.

        Loading editor
    • 452

      http://zxtcg.wikia.com/wiki/Sword_Craftsman%2C_Ittou#Free_Card_Version - works for me.

      Ah, http://zxtcg.wikia.com/wiki/Sword_Craftsman%2C_Ittou#Free Card Version was working, but with the underscores wasn't.

      Silly me, I was only replacing the first underscore. See updated script above.

        Loading editor
    • Yup, it finally works.

      Testing it with other browsers (IE, Firefox, Opera) and also works fine. Thank you so much. :)

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.