change Css on click event - javascript

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>Logout</li>
</ul>
please help me out i m stucked
Thanx and regards.

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.

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

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/

Related

How do I tell a submenu to be visible when its parents or containing links are active?

I have a menu in HTML and it looks like this:
<nav>
<ul>
<li>Home</li>
<li>About
<ul>
<li>Team</li>
<li>Philosophy</li>
<li>History</li>
</ul>
</li>
<li>Projects</li>
<li>Services
<ul>
<li><a href="#">Our Service</li>
<li>Special Offers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
Everything is in shape via CSS except one thing: to get the submenu to appear when its parent list-item's link points to the same address as the current page address.
I know this is possible somehow. But I really am the greatest noob with JavaScript or jQuery or PHP (I think the last two mean the same thing right?).
I tried copying and pasting code pieces like "OnClick=..." and one that was like "" or also one I found that contained "GetElenentbyTagName" (which almost worked...) but besides that I had no real clue about where to put them even. They just didn't work properly or not at all. I had a full done code piece but when I pasted it in and replaced some tag names it all got got marked red and my head is burning after trying to get it to work for the entire day.
I think this is possible because I have seen things that seemed to be describing part of what I want to do. E.g.
The script piece should either
Option A: Tell the browser that if the user is on a page which has the same address as a link in the menu it's href-address is, then it's submenu (ul li ul) or the menu (ul) where itself is contained in, should get "visiblity:visible".
Option B:
The script code says like "if the user clicks on an menu item (ul li), then it's submenu (ul li ul), if it has one, or if the menu-item that is being clicked is one of the submenus, then this submenu should become "visibility:visible". If the item that is clicked doesn't have a submenu, no submenu should be shown.
The HTML code must not have classes or other attributes directly anywhere between (nav) and (/nav) though.
I do not have sure if i understand what you need,
you need when user go to some menu page it get the url and active that link on menu until the user is on that page right?
if is that,
i think something like that should work:
<script type='text/javascript'>
$(function(){
$item = $('ul li a').filter(function(){
return $(this).prop('href').indexOf(location.pathname) != -1;
});
$item.css('visibility','visible'); //or whatever ur using to active it.
});
</script>
You can do this with CSS:
li ul {
display: none;
}
li a:hover + ul {
display: block;
}
http://jsfiddle.net/7bxf6r33/
[Edit]
This works:
http://jsfiddle.net/7bxf6r33/7/

Active link after click [duplicate]

This question already has an answer here:
Add ".active" class to the current page's link in a menu using jQuery or PHP [closed]
(1 answer)
Closed 8 years ago.
I cant find a way to add a class to an "a" element of a nav bar.
This is the html nav and the jQuery (applied to test.html url only, to test it):
$(document).ready(function() {
$("a").click(function() {
var actRef = $(this).attr("href");
if (actRef === "test.html") {
$("a[href='test.html']").addClass("active");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<ul>
<li>Inicio
</li>
<li>Test
</li>
<li>Item
</li>
<li> test2
</li>
</ul>
</nav>
This isnt working, it just doesnt do anything, but if i change the .click to .hover it works fine adding the class but doesnt go to the link so the info of the page wont change.
I also tried this: How to change active class while click to another link in bootstrap use jquery? but neither works because of the e.preventDefault();...
If i take out the preventDefault it wont add the class but it will forward to the link...
PD: The aim is to let the user know on which tab he is actually on depending on the menu link he clicked.
Why not use then anchors :active state:
a:active {
/* your .active styles */
}
You code is not working as you are trying to set class on some link using javascript, and then navigating same time. So thing is the part where you are changing class for link is working actually, however you are not able to see it as after navigation html will be reloaded.
To solve this problem , you need write a common function for updating the class of link, in your common html. However, call that function from the html being loaded at onload event instead of calling at click.
Your common js or html will be having function :-
highlightlink(linkid){
$("a[href=' + linkid +']").addClass("active");
}
Each html will call this functin onload with respective htmlname.
For example test.html will hat this code :-
$(document).ready( function (){
highlightlink('test.html')
});
});
While index.html will have :-
$(document).ready( function (){
highlightlink('index.html')
});
});
Once your html is loaded, the that particular html will loaded
Do you really need to add a class to the html element? If it's about styling I think it might be possible to solve your styling using a simple :active pseudo selector. See example below:
li:active {
background-color: #f99;
}
li a:active {
color: #fff;
}
<nav>
<ul>
<li>Inicio
</li>
<li>Test
</li>
<li>Item
</li>
<li> test2
</li>
</ul>
</nav>
So what you can do is you can add a page link in the URL querystring like:
www.example.com/test.html?pageinfo=test.html
Now after the successful page loads you can retrieve page info from the query string and then you can add an active class to the anchor tag.
This way you will get querystring like this pageinfo=test.html and after successful parsing of querystring you will convert the information to {pageinfo:test.html}.
Using that you can add style/class to the anchor tag.
Thanks to #Panther this is easier than i tought:
$(document).ready( function(){
var location = window.location.pathname;
location = location.replace("/", "");
$("a[href='"+location+"']").addClass("active");
});

jQuery addClass to list item

I have multiple pages that all use a simple tab menu at the top.
The menu (aka list) is stored in a separate html file:
<ul>
<li id="Tab1"><a href='../Page1.html'> Page1 </a></li>
<li id="Tab2"><a href='../Page2.html'> Page2 </a></li>
<li id="Tab3"><a href='../Page3.html'> Page3 </a></li>
every page has <div id='tabs'> </div> and
$('#tabs').load('CommonTabs.html');
Everything works fine, my tabs load into the 'tabs' div. Now I want to set a class of one div on each page to "active", so that the proper style defined in a css can be applied.
I tried:
$('#tabs').load('CommonTabs.html');
$('#Tab1'.addClass("active");
But that doesn't seem to work. When I do "inspect element" in a browser, the li does not have the "active" class assigned.
The load function is asynchronous, so the data is not loaded when the second call executes. Perform it in a callback function instead:
$('#tabs').load('CommonTabs.html', function () {
$('#Tab1').addClass("active");
});
You have a syntax error. Try:
$('#Tab1').addClass("active");
I will give you an example to set a class to a specific element on a button click. Of course you will need to create a button with the class addClassButtonTab3 for this to work.
$('.addClassButtonTab3').click('on', function() {
$('#tab3').addClass('active');
});
We are binding an event handler to a button with class 'addClassButtonTab3' and when it is clicked we are adding a class to an element with ID tab3.

Make only bullets clickable

I'm working on a menu that is designed using an unordered list, with each list element containing a link to another page. However, I would also like to be able to click on each bullet point to open more subcategories that will also link to other pages.
Essentially, I would like to be able to click once on a link and have it go to the correct page, but I would also like to click on the bullet point and have it expand into the subcategories. I've been researching how to separate the bullet from the content of the li, but it doesn't seem to be working in my case, likely because my li contains a lot of subcategories. Here's an example:
<li id="m2l1" class="child">
Y
<ul id="u11">
<li class="gchild">Y.1</li>
<li class="gchild">Y.2</li>
<li class="gchild">Y.3</li>
<li class="gchild">Y.4</li>
<li class="gchild">Y.5</li>
<li class="gchild">Y.6</li>
<li class="gchild">Y.7</li>
<li class="gchild">Y.8</li>
<li class="gchild">Y.9</li>
</ul>
</li>
Does anyone have any suggestions as to how to separate the bullet from the text in my case?
Here's the link: http://jsfiddle.net/stamblerre/XYp48/17/
Thank you!!!
Your HTML is invalid. You can't have div inside your ul. Moreover, you can greatly simplify your code by moving separate logic for each li into one generic handler.
Something like this:
Demo: http://jsfiddle.net/abhitalks/XYp48/18/
CSS:
ul {
display: none;
overflow: hidden;
}
ul:first-child {
display: block;
}
JS:
$("li").on("click", function () {
$(this).children("ul").slideToggle();
return false;
});
Edit:
I deliberately left out checking of a because clicking the a would navigate to the respective pages (as mentioned in your question), so expand/collapse wouldn't matter.
However, as per your comment if you really want to remove a altogether from the handler, then you can use the event target to handle li without a. Something like this:
Demo 2: http://jsfiddle.net/abhitalks/XYp48/22/
JS:
$("li").on("click", function (e) {
var $t = $(e.target); // get the event target as a jQuery object
if (!$t.is('a')) { // check if the target is not an anchor
$(this).children("ul").slideToggle();
return false;
}
// otherwise if target is anchor, then do nothing
});
Change your list still to hide bullets, then modify your html to :
<li class="gchild">•Y.1</li>
Should do the trick.
<li class="gchild">Y.1</li>
One way that worked for me: remove the bullet with li { list-style-type: none; } then add your own bullets with the character • (alt-8 on a mac). Add that character inside a elements like so:
• X
with the label now outside of the element.
Hope this works for you!

add class when click in a link doesn't work

it removes the class but it doesn't add the class, i can't use .click() function it needs to be onclick=""
<li class="selected">Click me</li>
<li>Click me</li>
function myfunction(a,b,c){
$('ul li.selected').removeClass('selected').addClass('none');
$(this).closest('li').addClass('selected');
}
You are already using jQuery, so just use jQuery to handle all your events.
Add this code;
$(function(){
// bind click event to your <a> tags
$('a').click(function(e){
// prevent the default behaviour of your links
e.preventDefault();
// remove the class from all li's
$('li').removeClass('selected');
// add selected to the clicked a's parent li
$(this).parent('li').addClass('selected');
});
});
Then keep your html clean from JavaScript
<li class="selected">
Click me
</li>
<li>
Click me
</li>
p.s.
If you are wanting to put PHP in, then you could put things in like;
// check out my 1337 php coding skillz!
Click Me
Then access it in your jQuery using
$(this).data('foobar');
pps
Sorry my php coding skills are rubbish!

Categories

Resources