Mixed PHP with jQuery AJAX
However, I am not sure if this is good practice, or if it should be avoided.


While I don't think it is bad practice, it could be simplified. One technique to simplify it is using event delegation. 

For example, the array of tab options could be added to a JavaScript array:

$tab_options = array('home', 'profile', 'news', 'api');
echo 'var tab_options = '.json_encode($tab_options).';';


Then add a click handler to the document and check if the id attribute corresponds to one of those tab options. 

$(document).click(function(clickEvent) {
    var targetId = clickEvent.target.id;
    if (tab_options.indexOf(targetId) &gt; -1) {


In that code Array.indexOf() is used but one could also use Array.contains() though it isn't supported by as many (mostly older) browsers (e.g. IE).

Then to get the equivalent of ucwords(), a solution like from this answer can be used:

var properCaseOption = targetId.replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});                    
window.top.document.title = properCaseOption;


With this approach, the JavaScript code is not duplicated once for each tab option. Perhaps it may not be a big issue because that code could easily be updated with the PHP code, it would yield a larger HTML/JS page size.

See a demonstration of this in this playground example but note that the AJAX requests won't yield the pages as expected so the code to update the containers has been commented out. However I made a phpfiddle that has the response from the AJAX request utilized.