Question

我创建了一个非常简单的RadioButtonList：

<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>

我为＆＃34;选择＆＃34;添加了一些css规则。类。但是，当用户点击单选按钮时，＆＃34;选择＆＃34; class被删除，而不是应用于新选择的选项。

如何确保保持当前选中/选中的单选按钮的列表项始终具有＆＃34;已选中＆＃34;类？

编辑：

如果我将其添加到后面的代码中：

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，它适用于测试网络应用程序。

<强> 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;
}

ASP.NET RadioButtonList丢失class =＆＃34; select＆＃34;当选择改变时

1 个答案: