如何使用css更改选项卡标题背景的活动颜色

时间:2016-08-03 15:12:12

标签: html css

我正在尝试更改标签菜单中活动标题标签的背景颜色。

标签

    li.is-active {
    
    background-color:blue;
    
    }
     <div class="row">
        <div class="medium-12 columns">
    <ul class="tabs" data-tabs id="authentication_tab">
      <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
      <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
    </ul>
    <div class="tabs-content" data-tabs-content="authentication_tab">
      <div class="tabs-panel is-active" id="panel1">
        <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
      </div>
      <div class="tabs-panel" id="panel2">
        <p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
      </div>
    </div>
    </div>
    </div>

1 个答案:

答案 0 :(得分:0)

使用jQuery(如果jQuery的语法对你而言很多注释):

  protected void ddlOptions_SelectedIndexChanged(object sender, EventArgs e)
{
    for (int loopcnt = 1; loopcnt <= Convert.ToInt32(ddlOptions.SelectedValue.Trim()); loopcnt++)
    {
        TextBox tb = new TextBox();
        tb.ID = "tb" + loopcnt;
        ctrlPlaceholder.Controls.Add(tb);
    }
}

{{3}}

修改

要引用jQuery,请在文档的<div> Question: <asp:TextBox ID="txtQuestion" runat="server"></asp:TextBox> <br /> <br />Number of Options: <asp:DropDownList ID="ddlOptions" runat="server" AutoPostBack="true" onselectedindexchanged="ddlOptions_SelectedIndexChanged"> <asp:ListItem Value="1">1</asp:ListItem> <asp:ListItem Value="2">2</asp:ListItem> <asp:ListItem Value="3">3</asp:ListItem> <asp:ListItem Value="4">4</asp:ListItem> <asp:ListItem Value="5">5</asp:ListItem> <asp:ListItem Value="6">6</asp:ListItem> </asp:DropDownList> <br /> <br />Options: <asp:PlaceHolder runat="server" ID="ctrlPlaceholder"></asp:PlaceHolder> </div>中添加:

// Bind a function to the `click` event of elements matching the selector `.tabs-title`
// Note that within a jQuery function, `$(this)` is the current element represented as a jQuery element object.
$(".tabs-title > a").click(function() {
    // For each element with the class selector `.tabs-title`
    $(".tabs-title").each(function() {
        // Remove the class "is-active" from the current element in the loop
        $(this).removeClass("is-active")
    })

    // Get the parent of the clicked `a` element (i.e., the `.tabs-title` element), then add the class.
    $(this).parent().addClass("is-active");
})