Question

My application has a horizontal tab whose code is in the master file. Each aspx page has masterpagefile added to it so horizontal tab appears in each page.

Now I have a scenario where if I click any tab in the horizontal tab that particular tab name has to change color and the rest will remain blue which is the application tab color.

But since the code is in master file, not sure how to approach. I thought of doing changes in the master file but looks like I need to add some hidden variable. Is there a way to add javascript in each aspx to do the same which will simply?

This is my code in master file:

<div id="header">
    <ul id="navigation" title="Navigation" tabindex="200">
    <li><a href="Home.aspx">Home</a></li>
    <li><a href="NIITS.aspx">About NREPP</a>
        <ul>
        <li><a href="Contacts.aspx">Contacts</a></li>
        <li><a href="Search.aspx">Search</a></li>
        </ul>
    </li>
</div>

Page tag in each aspx file for example contacts file is below:

<%@ Page Title="Contacts" Language="C#" MasterPageFile="~/NIITS.master" AutoEventWireup="true" CodeBehind="Contacts.aspx.cs" Inherits="Contacts" %>

What javascript I can write in this aspx file so it changes the tabname(contacts) to black. Any suggestions?

Answer 1

You don’t need to use javascript to achieve this.

Run the elements server-side, and in your .aspx file, reference the element by using Master.FindControl(). You can then apply a css class for styling.

For example, in your Master page you could change the Home navigation link line to:

<li><a id="navHome" runat="server" href="Home.aspx">Home</a></li>

Then in your Home.aspx file, add something like the following to your code behind:

protected void Page_Init(){
    ((HtmlControl)Master.FindControl("navHome")).Attributes["class"] += " active"
}

This will add an additional active class to your anchor element which you can then style:

#navigation a.active {
   font-weight:bold;
}