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
– Brunis, Commented Jul 26, 2014 at 9: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
– Vishnu, Commented Jul 28, 2014 at 5:04

DF_ · Accepted Answer · 2014-07-26 09:39:55Z

1

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.

answered Jul 26, 2014 at 9:39

DF_

4,04327 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

V31 · Accepted Answer · 2014-07-26 09:45:48Z

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, 2014 at 9:45

answered Jul 26, 2014 at 9:39

V31

7,6643 gold badges28 silver badges44 bronze badges

8 Comments

Vishnu Over a year ago

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.

V31 Over a year ago

what is the PostBackMethod?

Vishnu Over a year ago

PostbackMethod is like refresh page or changing one dropdown list using another den dat will be get refresh the UpdatePanel or the Page

V31 Over a year ago

@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

Vishnu Over a year ago

a_Report.Attributes["class"] = "homeactive";

|

Abhinav · Accepted Answer · 2014-07-26 11:57:09Z

0

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/

answered Jul 26, 2014 at 11:57

Abhinav

3531 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

change Css on click event

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related