1

I have made tabs on my site. By tabs I mean the navigation links, rather then loading a new page use some java script and css to just switch to another tab containing more content. I'm wondering how I would be able to link to a specific page when it's done like this?

My code is similar to this one: Using jquery easyui, how to create a tab by a link which is in a tab?

Edit: http://fogest.net16.net/righttoweb/ <<< There is a link to the site. Look at the tabs. How would I link to the page of one of those tabs?

Community
  • 1
  • 1
ComputerLocus
  • 3,448
  • 10
  • 47
  • 96

1 Answers1

4

Add anchors to the end of your URL, ie http://URL/righttoweb#about and on $(document).ready() block of code pick up the anchor and using a hash table figure out what tab needs to be selected.

Also make sure when users click on your tabs, you update the anchor in the top bar as well, in order to preserve which tab was selected if the user decides to bookmark the URL or send it to someone else

edit:

Well every time a user clicks on one of your tabs, with the onClick event you need to alter the navigation history of your page, for ex:

window.history.pushState("object or string", "Some Title", "#tab" + tabname);

This will enable the back/forward buttons to work

then everytime the page loads you need to

$(document).ready(function() {
    if(window.location.href.indexOf('#'))
        updateTab(location.hash);
});

function updateTab(tabname) {
    your logic to update tab...
}

Hope this makes sense

Reza S
  • 9,480
  • 3
  • 54
  • 84
  • The links already have anchor or I guess ID's just for whatever reason they don't work. For example check what the buttons are linking to. This is the code for the "Welcome" button `
  • Welcome
    • ` the non active look like this: `
  • About
    • `. If the link I'm clicking is using the ID's then why can I not use the id's to manually link to them? (If you want the whole code I can email it to you or something) – ComputerLocus May 08 '12 at 02:08
  • Your URL is currently not updating when you switch tabs. the class is just for the looks of it. You need Javascript code to update URL when you switch tabs. Also you need another Javascript code on document.load to pick up what _anchor_ the URL has, and based on that select the proper tab – Reza S May 08 '12 at 02:53
  • I guess this is why using a template can be bad. I've learnt a lot from it but I do not know how I do this. It's asking a lot but could you maybe edit your answer in with a little bit of code. Of course you don't have my code so you don't know exactly what you need to do to implement it but just a little something would be great! – ComputerLocus May 08 '12 at 02:56
  • You should really look for examples online if you need help writing this from scratch. I can help you if you're stuck on a specific problem or issue. – Reza S May 08 '12 at 21:04