I want to say hello to you from the future :) Recent events:

1. Google can now run the javascript code on your website¹
2. People now use tools like React.js, Ember, and Angular to run complex javascript tasks on pages, and Google can still index them¹
3. You can use html5's history API (pushState, react-router, ember, angular) so that you can set a separate URL for each tab you want to open and Google will index it¹

So, to answer your question, you can safely change the title and other meta tags via javascript (if you want to support non-Google search engines, you can also add something likehttps://prerender.iostuff), just make them accessible as separate URLs (otherwise how would Google know they are different pages and show them in search results?). Changing SEO-related tags after a user clicks on something is simple:

if (document.title != newTitle) { document.title = newTitle; } $('meta[name="description"]').attr("content", newDescription);

Just make sure you don't block CSS and javascript from loading in robots.txt, and you can use theFetch as Googleservice in Google Webmaster Tools.

1:http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

UPDATE: Based on comments and references onSearchEngineLand, most web crawlers will index the updated titles. The answer below is outdated, but the code still applies.