CODEWITHSUNDEEP
asp.netmaster-pages
Nick Manojlovic
Nick Manojlovic

Reputation: 1171

Setting an <li class="active"> using MasterPage

Code below I have located under my MasterPage. Once one of the tabs get clicked for example "Contact Us" I would like to set the li class to active. I cannot figure out how to do this. Any help would be great. 

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

Upvotes: 1

Views: 10844

Answers (3)

Nick Manojlovic
Nick Manojlovic

Reputation: 1171

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

Upvotes: 1

Karl
Karl

Reputation: 595

You can do it with jQuery, like so:

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

Upvotes: 2

Firoz Ansari
Firoz Ansari

Reputation: 2515

Have a public property on the page with default value and use this property to set CSS in your page.

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>

Once css of li is set, use CSS to visually represent it as active.

Upvotes: 1

Related Questions