0

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

3
  • Share your css please Mar 14, 2018 at 13:46
  • Sorry. I've added the CSS Mar 14, 2018 at 13:53
  • but there is the part missing where you use the active1, active2, active3 & active4 classes to set styles Mar 14, 2018 at 13:59

1 Answer 1

1

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.

2
  • 1
    Thank you very much! This helped a lot Mar 21, 2018 at 9:16
  • Glad to help :-) Mar 21, 2018 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.