We Keep Coding

Open specific tab with <a href> and save to localStorage

I have a table whose current value is stored in localStorage (see JSfiddle). How do I set up a link in <a href> to open the desired table, e.g. second in order?
For example: I'm on the Home page and clicking <a href> redirects me to the List page, where tab Teacher is opened, and this option is also saved to localStorage (that is, when the List page is refreshed, the Teacher tab remains open).
Thank you!

If I understand correctly, you want to create a link to an HTML page, which, on that page, there are various options for a current tab to be selected, and you want, that when someone clicks on a particular link, that tab will already be open.
Am I right?
If so, then let's do the following.
If you're setting the value when the page loads based on localStorage, then by definition it will only open that which was opened last.
So the question is how do you make the particular link open only one tab, and another link open the other? It seems from your example that you want a link to the "student" tab and a separate link to the "teacher" tab.
To do this just with client side JavaScript, you can use the window location hash, and read it with JavaScript, and do the respective function based on the hash value.
Say you have some URL like example.com, which brings you to a default tab. Then, if you want a link to a non default tab, simply add something to the end of the URL preceded by a "#" symbol, then you can read it in JavaScript with location.hash
So the new URL may look like: example.com/#teacher, then somewhere in your page with JavaScript, do:
var page = location.hash //== "#teacher"
activateTab(page.replace("#", "")); //activates "teacher" tab, assuming that function would do something, but you get the idea

How can a webpage redirect to a new page while clearing "back" history, how to prevent it

I've seen webpages that redirect to other pages, and after the new page is loaded, the address bar shows the new URL, but the browser "Back" button is not able to return back to the previous (original) webpage.
I'm talking about a site like "today.com" and other websites that do similar things.
For example, I:
start Firefox and open a new tab in a new window (no back history).
visit most any article on "today.com" (by clicking a bookmark or pasting a URL into the address bar) such as this webpage: http://www.today.com/video/prince-s-paisley-park-al-roker-gets-first-look-inside-untouched-museum-779588675703 (at least most any page in "/video/" path).
watch the video, perhaps pause the video and read the article.
up to this point, everything is as expected. The URL of the bookmark (or the pasted URL) remains shown in the address bar.
After some time I either:
resume watching the video to its end, where the webpage automatically loads (redirects) a new "random" article/webpage (well probably not "random" from the site's point of view, but for me, I couldn't tell it from any randomly selected page).
or I click a link on the page to a different article on the site.
At this point, the URL of the new page is shown in the address bar and the new page is loaded.
What's troublesome, is that the URL of the original page that I visited (by clicking the bookmark or pasting the URL into the address bar), is (somehow) removed from the browser "Back" history, and replaced with the URL of the new page. Since I opened the page from a new tab, the "Back" button is not active (not "clickable").
I can repeat this any number of times by letting the video play through and let the next page load automatically, or click another link on the page. The "Back" button is not able to return to any of the previously visited pages.
To be clear, this behavior is not exclusive to the specific webpage I provided the example link for. It happens on many pages but not every page on today.com. And, I've seen similar behavior on other websites.
My question is:
How do they do this?
More importantly, how can I prevent it?
I was thinking along the lines of using "Greasemonkey" to modify the page to prevent it from doing whatever it does to remove the URLs from the browser back history.

Dynamic Website - load almost all of the page with out reload and change the url

I am developing a website and having trouble figuring out what I can use to accomplish this requirement.
I need a website where links in the document load the contents of page that was clicked.
I am thinking about using angular.js but how might a user get back to the back by entering it into the url.
Example of what I am looking for:
You are on www.example.com
You click the link to www.example.com/profile/1234.
The page doesn't reload but loads the contents of the new page.
The static element at the bottom of the page doesn't change the the rest of the page does.
The url has also changed and you have the history of being at www.example.com
You can also load the exact same page by pasting the url www.example.com/profile/1234, it also has the same bar at the bottom.
You could also say I need something similar to youtubes website. You click a link and it loads only some of the page. But if you re-enter the url you get all of the page.
Thanks.

Changing tabs and landing back on the same tab?

Ok, I do not have code for this so I would need assistance here. I have a page that has multiple tabs worth of information. If I proceed to an entirely new page (URL) and then hit back on the browser, is there a way to land back on the tab I left off of?

when you click on a tab you can append a url parameter e.g. ?tab=tab1. And when you load the page you can check you're url parameters and default to that tab if it is in the parameter.
Here's an example that's similar. When you click on the toolbar on the left on bootstrap's getting started page it appends that item to the url. so when i click on 'support' the url looks like http://getbootstrap.com/getting-started/#support and when you go to that url it automatically scrolls you to that section on the page.

How to Detect Back button click

I am working on an HTML website where I have 4 divs in an index.html page.
Earlier on clicking the div section used to expand it and the other section became smaller in width.
Then the client asked to make sure that the URL was changed when we click any of the div.
Suppose we click the div called test. The page url shoul become /test.html, without the page reloading. I have implemented this functionality using the history API.
Now when I click on the test div and the url becomes /test.html and then if I click a link, it redirects to another page.
From this page, if I click on the browser back button, then it takes me to /test.html which does not exist and we get a 404 error.
I tried making a redirection page called test.html which redirects back to the index.html page, but we get a blink while doing so.
What I want to ask is whether there is a solution for this problem?

If you have mod_rewrite enabled on the web server, you could set this up as a URL rewrite rule.
RewriteEngine On
RewriteRule ^test.html originalfile.html [NC]
This will redirect test.html to the original html file when the user presses the back button and navigates to test.html while the browser address bar still displays test.html. From here, you should be able to detect the address in javascript and display the appropriate div.
(Note that you will probably need to modify the above rewrite rules depending on how your server is configured. For more information about creating rewrite rules, see this link.