Question

下面的代码我位于我的MasterPage下。单击其中一个选项卡后，例如“联系我们”，我想将 li class 设置为活动状态。我无法弄清楚如何做到这一点。任何帮助都会很棒。

<div id="navcontainer">
    <div class="section-wrapper">
        <ul class="links">      
            <li class="">                
                <a href="">Our Company</a>
            </li>       
            <li class="">               
                    <a href="Contact%20Us/Default.aspx">Contact Us</a>
            </li>       
            <li class="">                
                    <a href="">Tab 3</a>
            </li>       
            <li class="">                
                    <a href="">Tab 4</a>
            </li>   
            <li class="">                
                    <a href="">Tab 5</a>
            </li>               
        </ul>
    </div>
</div>

Answer 1

你可以用jQuery做到这一点：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 

<script>
$("li").click(function(){
    alert("this is the message");
    if ($("li").hasClass('active')) {
        $("li").removeClass('active');
    }
    $(this).addClass('active');
});
</script>

Here is an example of your code.

Answer 2

在页面上使用默认值设置公共属性，并使用此属性在页面中设置CSS。

Default.aspx.cs

public partial class Default : System.Web.UI.Page
{
    public string ActiveTab = "contact";

    public void Page_Load(object sender, EventArgs e)
    {

    }
}

Default.aspx的

<ul class="links">      
    <li class="">                
        <a href="">Our Company</a>
    </li>       
    <li class="<% if (ActiveTab=="contact") { %>active<% } %>">
            <a href="Contact%20Us/Default.aspx">Contact Us</a>
    </li>       
    <li class="">                
            <a href="">Tab 3</a>
    </li>       
    <li class="">                
            <a href="">Tab 4</a>
    </li>   
    <li class="">                
            <a href="">Tab 5</a>
    </li>               
</ul>

设置li的css后，使用CSS直观地将其表示为活动状态。

Answer 3

        HtmlGenericControl tabContact = Master.FindControl("liContact") as HtmlGenericControl;
        tabContact.Attributes.Add("class", "active");
        Master.FindControl("liContact").Controls.Add(new LiteralControl("<span></span>"));

使用MasterPage设置<li class =“active”> </li>

3 个答案: