How to change Page title when click tab?

Question

I have aspx page and code as the following :

<%@ Page Title="" Language="C#" MasterPageFile="~/Autheticated.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="PIWorks.PIWebNext.Pages.Default" %>

<%@ Import Namespace="System.Web.Optimization" %>
<asp:Content runat="server" ID="Content1" ContentPlaceHolderID="UxContentHead">
    <title>Public Reports</title> // default selected tab
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="UxContentMain" runat="server">
    <div ng-controller="homeController" style="height: 100%; width: 100%; position: relative;">
        <div pi-tab-view name="MainTabs" selected-tab-name="TabPublic">
            <div pi-tab name="TabDashBoard" is-visible="TabDashBoardIsVisible">
                <div class="tab-head">Dashboards</div> // dash tab
            </div>
            <div pi-tab name="TabPublic">
                <div class="tab-head">Public Reports</div>  // public report tab
            </div>
            <div pi-tab name="TabPrivate">
                <div class="tab-head">Private Reports</div>  // private report tab
            </div>
            <div pi-tab name="TabFavorite">
                <div class="tab-head">Favorite Reports</div>  //favorite report tab
            </div>
        </div>
    </div>
</asp:Content>

I want to when clicked private report tab(or another tab) page title should change

for example : click private report => Page Title : Private Reports
                    favorite report => Page Title : Favorite Reports
                    dashboard => Page Title : Dashboards

How can I do any idea please ?

Answer 1

There are some ways to acheive this. You can use Javascript as mentioned above. Or JQuery. Or even the aspx itself. Here is an example in JQuery:

JQuery

$(document).on("click", ".tab-head", function trigger(){
  if(this.text() == "Public Reports"){
     document.title = "Public Reports";
  }
  else if...
});