ASPX Bootstrap tab class accessing problem

Question

I'm using bootstrap nav-tabs and I have a problem: From code-behind, I cannot get the value of attribute 'class' of the [li] tag when it's selected. It's always returned null. Here's my aspx:

<!-- This is the js to prevent losing active tab after postback -->
<script type="text/javascript">
    $(function () {
        var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
        $('#Tabs a[href="#' + tabName + '"]').tab('show');
        $("#Tabs a").click(function () {
            $("[id*=TabName]").val($(this).attr("href").replace("#", ""));
        });
    });
</script>

<div id="Tabs" role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li runat="server" id="Tab1" role="tab">
            <a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal</a>
        </li>
        <li runat="server" id="Tab2" role="tab">
            <a href="#employment" aria-controls="employment" role="tab" data-toggle="tab">Employment</a>
        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content" style="padding-top: 20px">
        <div role="tabpanel" class="tab-pane active" id="personal">
            This is Personal Information Tab
        </div>
        <div role="tabpanel" class="tab-pane" id="employment">
            This is Employment Information Tab
        </div>
    </div>
</div>

<asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" OnClick="Button1_Click" />
<asp:HiddenField ID="TabName" runat="server" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

• Code-behind:

protected void Button1_Click(object sender, EventArgs e)
{
    string cl1 = Tab1.Attributes["class"];
    string ro1 = Tab1.Attributes["role"];
    Label1.Text = "class of tab1: " + cl1 + "<br />role: " + ro1;
}

- When I click button1 while Tab1 is selected --> My result displays on Label1:

class of tab1: {nothing}
role: tab

From the same tag [li], attribute 'role' can be retrieved, but 'class' is null. I have no idea about this indeed, because when I inspect the element, the class of that [li] is 'active' I tried googling around but unable to find similar questions. Please help me with this, thanks!!!

Answer 1

<li runat="server" class="yourclass" id="yourid" >

Add the runat="server" attribute to your li element, then call the id of the li from your code behind like e.g yourid.Attributes and you can add or remove classes for the element