CODEWITHSUNDEEP
c#htmlcss
user1989680
user1989680

Reputation: 3

Change CSS for Active Tab (Navigation Menu)

I want to change the styling of an active tab on my website.

My current code is: 

    string pageName = this.ContentPlaceHolder1.Page.GetType().FullName;

    string active1 = "";
    string active2 = "";
    string active3 = "";
    string active4 = "";


    if (pageName == "ASP.default_aspx")
    {
        active1 = "test1";
    }

    else if (pageName == "ASP.kalender_aspx")
    {
        active2 = "test1";
    }

    else if (pageName == "ASP.organisation_aspx")
    {
        active3 = "test1";
    }

    else if (pageName == "ASP.kontakt_aspx")
    {
        active4 = "test1";
    }

    litNav.Text += "<ul class='menusm'>";
    litNav.Text += "<li class='" + active1 + "'><a href='default.aspx'>Nyheder</a></li>";
    litNav.Text += "<li><a class='" + active2 + "'" + "href='kalender.aspx'>Kalender</a></li>";
    litNav.Text += "<li><a class='" + active3 + "' href='#'>Organisation</a></li>";
    litNav.Text += "<li><a class='" + active4 + "' href= '#'>Kontakt</a></li>";
    litNav.Text += "</ul>";

When I put the string "active1" inside li tag it changes the color on the active tab

changing class inside li

But when I try to put my string(active2) inside my "a" tag, instead of "li"

Not working inside a tag

It doesn't respond.

My CSS 

.topnav ul li.current_page_item a {
                    color: #fff;
                    background: #f00 url(../images/menu_a.gif) repeat-x left top;
                    border-left: 1px solid #1d589c;
                    border-top: 1px solid #1d589c;
                    border-right: 1px solid #fff;
                    border-bottom: 1px solid #fff;
                }

I just made the "Test1" for testing. But the class I want to use is .topnav ul li.current_page_item a

Upvotes: 0

Views: 567

Answers (1)

Cole Huffman
Cole Huffman

Reputation: 300

Ideally, you are on the right track but you will need to emulate the Javascript implementation of this into your project to add / remove classes from elements in your HTML.

I threw together a quick example here of this in this JS Bin.

So essentially, you want to have different classes assigned to your HTML attribute which associate with your stylesheet. In my example, I set up my code like this:

HTML:

<button id="testButton" class="unclicked">Button</button>

CSS:

.unclicked {
   background-color: red;
}

.clicked {
   background-color: green;
}

Now that your parameters have been set, just set up the logic to reassign the classes. **Be sure to clearly define the attributes of your new classes in your styles so your changes are interpreted correctly.

Upvotes: 1

Related Questions