How to dynamically change a web page's title?

Question

I have a webpage that implements a set of tabs each showing different content. The tab clicks do not refresh the page but hide/unhide contents at the client side.Now there is a requirement to change the page title according to the tab selected on the page ( for SEO reasons ). Is this possible? Can someone suggest a solution to dynamically alter the page title via javascript without reloading the page?

Answer 1

Yes, this is absolutely something you can do using JavaScript without reloading the page.

The code would look something like:

document.getElementsByTagName("title")[0].text = "New title";

What this will do is find all the HTML title tags (of which there should only be 1), grab the 1st one and then change its content. To make this trigger, you'd want to throw this in a function and call that function using the onclick parameter of the tabs.

function ChangeTitle(newTitle) {

document.getElementsByTagName("title")[0].text = newTitle;

}

<div id="tab1" onclick="ChangeTitle(\"The title changed!\")">

<!-- the normal stuff inside your tab -->

</div>

Hope this helped!