ASP.NET單選按鈕列表鬆動類=「選擇」時，選擇改變

Question

我有我創建了一個非常簡單的單選按鈕列表：

<asp:RadioButtonList ID="rblDisplayAs" runat="server" AutoPostBack="true" RepeatLayout="UnorderedList" CssClass="tab-nav"> 
    <asp:ListItem Selected="True" Text="List View" Value="list"></asp:ListItem> 
    <asp:ListItem Text="Calendar View" Value="cal"></asp:ListItem> 
</asp:RadioButtonList> 

頁面加載時，它呈現這樣的：

<ul id="pagecontent_rblDisplayAs" class="tab-nav"> 
    <li class="selected"> 
     <input id="pagecontent_rblDisplayAs_0" type="radio" checked="checked" value="list"> 
     <label for="pagecontent_rblDisplayAs_0">List View</label> 
    </li> 
    <li> 
     <input id="pagecontent_rblDisplayAs_1" type="radio" value="cal"> 
     <label for="pagecontent_rblDisplayAs_0">Calendar View</label> 
    </li> 
</ul> 

我爲「選定」類添加了一些css規則。但是，當用戶單擊單選按鈕時，「選定」類將被刪除，而不會應用於新選擇的選項。

如何確保持有當前選定/檢查單選按鈕的列表項始終具有「選定」類？

編輯：

如果我添加這對後面的代碼：

Protected Sub rblDisplayAs_SelectedIndexChanged(sender as Object, e AS EventArgs) Handles rblDisplayAs.SelectedIndexChanged 
    rblDisplayAs.SelectedItem.Attributes.Add("class", "selected") 
End Sub 

然後之後我改變選擇它呈現爲：

<ul id="pagecontent_rblDisplayAs" class="tab-nav"> 
    <li> 
     <input id="pagecontent_rblDisplayAs_0" type="radio" checked="checked" value="list"> 
     <label for="pagecontent_rblDisplayAs_0">List View</label> 
    </li> 
    <li> 
     <span class="selected"> 
      <input id="pagecontent_rblDisplayAs_1" type="radio" value="cal"> 
      <label for="pagecontent_rblDisplayAs_0">Calendar View</label> 
     </span> 
    </li> 
</ul> 

編輯：

這裏的css。網站上還有其他地方不是由也使用這些樣式的asp.net控件生成的。

ul.tab-nav { 
    overflow: hidden; 
    margin: 0px; 
    padding: 0px; 
    position: relative; 
    height: 35px; 
} 
ul.tab-nav li { 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    display: inline; 
    position: relative; 
    top: 5px; 
    line-height: 1.6; 
    background: none; 
} 
ul.tab-nav li.selected { 
    top: 0px; 
    z-index: 10; 
} 
ul.tab-nav li input { 
    display:none; 
} 
ul.tab-nav li a, ul.tab-nav li label 
    font-size: 116.67%; 
    font-size: 1.1667rem; 
    color: #a6a6a6; 
    font-family: 'FrutigerRoman', Arial; 
    text-decoration: none; 
    border: 1px solid #ccc; 
    border-bottom: 0px; 
    padding: 2px 2px 0px 2px; 
    display: inline-block; 
    position: relative; 
    height: 26px; 
    border-radius: 2px 2px 0px 0px; 
    background: #e9e9e9; 
} 
ul.tab-nav li.selected a, ul.tab-nav li.selected label { 
    border-bottom: 1px solid #fff; 
    padding: 2px 2px 5px 2px; 
    bottom: 0px; 
    color: #00619d; 
    background: #fff; 
} 

Answer 1

感謝增加對ul的CSS你的問題。

您的代碼中最後一個css類需要稍微更改以使所選樣式正常工作。這裏是完整的aspx，代碼和css，它在測試web應用程序中適用於我。

ASPX

<asp:RadioButtonList ID="rblDisplayAs" runat="server" AutoPostBack="true" RepeatLayout="UnorderedList" OnSelectedIndexChanged="rblDisplayAs_SelectedIndexChanged" CssClass="tab-nav"> 
    <asp:ListItem Selected="True" Text="List View" Value="list"></asp:ListItem> 
    <asp:ListItem Text="Calendar View" Value="cal"></asp:ListItem> 
</asp:RadioButtonList> 

代碼

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (Page.IsPostBack) return; 
    foreach (var li in rblDisplayAs.Items.Cast<ListItem>().Where(li => li.Selected)) 
     li.Attributes.Add("class", "selected"); 
} 

protected void rblDisplayAs_SelectedIndexChanged(object sender, EventArgs e) 
{ 
    rblDisplayAs.SelectedItem.Attributes.Add("class", "selected"); 
} 

CSS

ul.tab-nav { 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    height: 35px; 
} 

ul.tab-nav li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: inline; 
    position: relative; 
    top: 5px; 
    line-height: 1.6; 
    background: none; 
} 

ul.tab-nav li.selected { 
    z-index: 10; 
} 

ul.tab-nav li input { 
    display:none; 
} 

ul.tab-nav li a, ul.tab-nav li label { 
    font-size: 116.67%; 
    font-size: 1.1667rem; 
    color: #a6a6a6; 
    font-family: 'FrutigerRoman', Arial; 
    text-decoration: none; 
    border: 1px solid #ccc; 
    border-bottom: 0; 
    padding: 2px 2px 0 2px; 
    display: inline-block; 
    position: relative; 
    height: 26px; 
    border-radius: 2px 2px 0 0; 
    background: #e9e9e9; 
} 

ul.tab-nav .selected label { 
    border-bottom: 1px solid #fff; 
    padding: 2px 2px 5px 2px; 
    bottom: 0; 
    top: -5px; 
    color: #00619d; 
    background: #fff; 
}