CODEWITHSUNDEEP
javascripthtmlcsstabshyperlink
ComputerLocus
ComputerLocus

Reputation: 3618

How to link to a "tab" on my website

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?

Upvotes: 1

Views: 5476

Answers (1)

Reza S
Reza S

Reputation: 9738

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

Upvotes: 4

Related Questions