TabStrip - Custom CSS Classes

  • Overview
  • Attractions
  • Location
  • Calendar
  • Price
Overview
Attractions
Location
Calendar
Price
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadTabStrip allows you to control the appearance of the tabs. Thus, you can make the look and feel of each tab unique.
This example shows how the CssClass , HoveredCssClass and SelectedCssClass properties of the tabs can be used to make the appearance of each tab unique.

  • DefaultCS.aspx
  • styles.css
<%@ Page AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server" SelectedIndex="1"
            EnableEmbeddedSkins="false" Skin="" MultiPageID="RadMultiPage1">
            <Tabs>
                <telerik:RadTab Text="Overview" CssClass="tab overviewTab" SelectedCssClass="selectedTab"
                    HoveredCssClass="hoveredTab">
                </telerik:RadTab>
                <telerik:RadTab Text="Attractions" CssClass="tab attractionsTab" SelectedCssClass="selectedTab"
                    HoveredCssClass="hoveredTab">
                </telerik:RadTab>
                <telerik:RadTab Text="Location" CssClass="tab locationTab" SelectedCssClass="selectedTab"
                    HoveredCssClass="hoveredTab">
                </telerik:RadTab>
                <telerik:RadTab Text="Calendar" CssClass="tab calendarTab" SelectedCssClass="selectedTab"
                    HoveredCssClass="hoveredTab">
                </telerik:RadTab>
                <telerik:RadTab Text="Price" CssClass="tab priceTab" SelectedCssClass="selectedTab"
                    HoveredCssClass="hoveredTab">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>

        <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="1">
            <telerik:RadPageView runat="server" ID="RadPageView1">
                <img src="Images/01.Overview.png" alt="Overview" />
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="RadPageView2">
                <img src="Images/02.Attractions.png" alt="Attractions" />
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="RadPageView3">
                <img src="Images/03.Location.png" alt="Location" />
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="RadPageView4">
                <img src="Images/04.Calendar.png" alt="Calendar" />
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="RadPageView5">
                <img src="Images/05.Price.png" alt="Price" />
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?