I am not sure this is the correct area but here goes. On the index page of my site I have news items that have links to specific tabs within a page using #. When I first uploaded the page for my client, they claim that it worked. I was bad and did not test it myself. Now they say it stopped working. I am not sure what is going on or how to actually get this to work. Here is the staging site - http://staging.sacramentgame.com/index.html. On the first news item, the tanking link is supposed to lead to the tab called tanking. However it doesn’t. It goes to the first tabbed section, which is the active tab. When I look at the address bar it is the same for all of the tabbed sections - http://staging.sacramentgame.com/overview.html#tanking. On the index page I have the link set up as <li class="news">Tanks get ready as we discuss our <a href="overview.html#tanking">Tanking</a> concepts!</li>.
I have been searching the web for some sort of answer as to how exactly to set this up using Bootstrap tabs. I even found something that states Bootstrap jquery doesn’t have this function and never will so the user has to manually click the correct tab when directed to the page with the tabs.
Personally I do not like tabs but the client wants them.
Your tabs are activated by JS so linking to them via a fragment identifier won’t do anything as the js has hidden them. You probably need to get the fragment from the url in the address bar with js and then add the .in class to the corresponding tab content.
I don’t think the following will work but you could try using css ::target to try and activate the tab.
I’ve a feeling that may well fail as the js will probably upset it.
Edit:
Actually that won’t work because you would need to turn off the active tabs and remove the .in class from the currently selected item.
Looks like you will have to go the JS route and grab the fragment identifier from the url in the address bar and then turn on and off the appropriate items (or save a cookie from the other page and then check the cookie etc.).
There is a demo here that seems to do what you want.
After looking this over, it seems it is done with CSS. However, the author wants payment for it if used on a commercial site, which mine is. If I pay for this, my client is not going to pay me back. Plus I have the problem of the address bar URL. Sometimes Bootstrap is just not user friendly.
Is there a simple way that this can work? I have looked all over the place for something simple to get the link from the index page to go to a specific tab on another page. I am losing my mind. I personally hate tabs and for this site they are not a good idea.
I’ve moved this to the JS forum as you will need to grab the fragment identifier in the new page and activate the tabs as required or set a cookie as mentioned above.
(function activateTabFromHash() { if (location.hash) { var tabLink = document.querySelector('a[href="' + location.hash + '"]'); if (!tabLink) { return false; } tabLink.click(); if (location.hash) {
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
} } })();
It works but I don’t like the fact that the URL in the address bar still shows the #tabname when switching to a dfferent tab on the page after using the link from the index page. Is there a way to fix this?
Do I understand you correctly that when you click the “Tanking” link on the main page, you want the browser to open the overview.html page, with the tanking tab selected, but you don’t want #tanking to be appended to the url?
Yes but only when the user chooses another tab within the same page. Right now the link from the index page works and takes the user to the tanking tab. However, if the user decides to check out the other tabs on the overview page, the URL is still showing #tanking. Is there a way around this?
Would it not be a better idea to enable the fragment identifier (i.e. #whatever) for all of the tabs? That way you can link to a specific tab on a specific page.
We can probably work out how to get rid of it if you want, but I would consider leaving it in.
Sorry but I am not understanding what you are suggesting. This is a snippet that was given to me. I do not know what to add to get what you are suggesting to work.
If I understand the situation correctly, you have an initial page index.html, and you have a second page overview.html. On overview.html there is a set of tabs with the points “Class Overview”, “Class Roles and Basic Concepts”, “Resources”, “Tanking” and “DPS”. These tabs are generated using Bootstrap 3.
What I would suggest is setting up the tabs, so that the fragment identifier always shows in the url. This would give you urls like http://staging.sacramentgame.com/overview.html#overview http://staging.sacramentgame.com/overview.html#resources` and of course http://staging.sacramentgame.com/overview.html#tanking. Whenever you click on a new tab, the fragment identifier would change to indicate which tab you are currently viewing.
The advantage of implementing things this way is that you can link to the individual tabs from anywhere on the site.
