change Css on click event

Question

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.

Show us your ChangeSelectedMenuCss method, preferably all of it in a jsfiddle or jsbin. — Brunis, Jul 26 '14 at 09:38
Thank you all and sorry for the late reply i was little busy with my other work. and Can we Make this happen without javascript and JQuery on the CS page?? — Vishnu, Jul 28 '14 at 05:04

score 1 · Accepted Answer · answered Jul 26 '14 at 09:39

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.

V31 · Answer 2 · 2014-07-26T09:45:48.687

0

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";
}

edited Jul 26 '14 at 09:45

answered Jul 26 '14 at 09:39

V31

7,626
3
26
44

Thanx for the reply but by using javascript or jQuery it remove the selection on PostBackMethod so this will not work for me Can we make selection without javascript and JQuery. – Vishnu Jul 28 '14 at 05:00
what is the PostBackMethod? – V31 Jul 28 '14 at 05:19
PostbackMethod is like refresh page or changing one dropdown list using another den dat will be get refresh the UpdatePanel or the Page – Vishnu Jul 28 '14 at 05:35
@Vishnu: At a page or data refresh your selection will get removed anyways if unless that is not cached, so what I would suggest if you want to stay on the selection you need to store the element id on the refresh in a localStorage of the browser and on refresh check the localStorage if it is their, if not then give a default selection – V31 Jul 28 '14 at 05:58
a_Report.Attributes["class"] = "homeactive"; – Vishnu Jul 28 '14 at 06:22
See Currently i m trying this but i have 4 links so how can i check which link is clicked in CS page it is written.. – Vishnu Jul 28 '14 at 06:24
I suggested not to go server side, be on client side only. On the selection or postBackMethod do something like this http://stackoverflow.com/questions/18247130/how-to-store-the-data-to-local-storage – V31 Jul 28 '14 at 06:26
Sorry sir i m nt getting this wht he exactly did. Can u tell me how i store the id of the respected links onclick event. and get the id into the CS page. – Vishnu Jul 28 '14 at 06:37

score 0 · Answer 3 · answered Jul 26 '14 at 11:57

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/

change Css on click event

3 Answers3