CODEWITHSUNDEEP
javascriptcssasp.net
Vishnu
Vishnu

Reputation: 33

change Css on click event


I am having several links in asp pages and all links are having respected CSS. the 1st links is highlighted on the Home page with Different CSS. I want to toggle the CSS class on the the Click event whenever i pressed the 2nd or the the 3rd link respectively it should get highlighted and other one become Normal with Normal CSS.

<ul>
    <li><a href="../Admin/Home.aspx" id="a_Home" class="homeactive" onclick="ChangeSelectedMenuCss(this.id);">
        Home</a></li>
    <li><a href="../Admin/subadmindetails.aspx" id="a_Report" class="home" onclick="ChangeSelectedMenuCss(this.id);">
        SubAdmin</a></li>
    <li><a href="../Admin/control_panel.aspx" id="a_User" class="home" onclick="ChangeSelectedMenuCss(this.id);">
        Control Panel</a></li>
    <li><a href="../Admin/admin_master.aspx" id="a_CntrlPnl" class="home" onclick="ChangeSelectedMenuCss(this.id);">
        Master Data</a></li>
    <li><a href="../Admin/Login.aspx" class="home">Logout</a></li>
</ul>

please help me out i m stucked
Thanx and regards.

Upvotes: 0

Views: 542

Answers (3)

Abhinav
Abhinav

Reputation: 353

If you use JQuery, then this code may be useful for you.

First of all like this code-

$(function() {
    var links = $('a.link').click(function() {
    links.removeClass('active');
    $(this).addClass('active');
    });
});

And then in your CSS File, Add tis class-

a, a:visited { color:black }
a.link.active { color:blue; }

It might Help you.... or you can see this fiddle - http://jsfiddle.net/gHb9F/

Upvotes: 0

V31
V31

Reputation: 7666

In order to change class using javascript you can do something like this:

function ChangeSelectedMenuCss(id){
    document.getElementByClassName('homeactive').className ="home";
    document.getElementById(id).className = "homeactive";
}

Upvotes: 0

DF_
DF_

Reputation: 3973

I think you're confusing how ASP.NET and Javascript interact with each other. When a user clicks on one of those links, the onclick event will fire, but then ASP.NET will load the page that relates to the link, therefore resetting the navigation menu.

What you probably want to do instead of using onclick events is to have a class on your Masterpage that identifies what page it is on, and then add the homeactive class to whatever link it needs to be on.

Upvotes: 1

Related Questions