I'm working with the following code:
http://jsfiddle.net/k5pnj4a4/8/ however my 'toggleClass' isn't working. Try the example in jsFiddle. Basically if I click the link, it goes red as expected but click again & it doesn't return to the original state :-(
Javascript:
$(document).ready(function(){
$('.filters a').on('click', function() {
var data_filter = $(this).closest("a").data('filter');
$(this).addClass('active');
if($(this).hasClass('active')) {
localStorage.setItem(data_filter,true);
} else {
localStorage.setItem(data_filter,false);
}
});
$('.filters a').each(function(){
var data_filter = $(this).closest("a").data('filter');
var checked = localStorage.getItem(data_filter);
if(checked){
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
HTML
<div class="filters">
<h3 data-target="#colours_filters">Colour</h3>
<ul id="colours_filters">
<li class="filter-option">Black</li>
<li class="filter-option">Blue</li>
</ul>
</div>
Can someone provide assistance with this?
Thank you
Try this:
$(document).ready(function(){
$('.filters a').on('click', function() {
if($(this).hasClass("active")) {
$(this).removeClass("active");
}
else {
$(this).addClass("active");
}
});
});
Related
Visit this website: http://dev.giftsdesign.com.sg/product-list/0/0
I will expect the output like,
If I click one sidebar menu, others sidebar menus should be collapsed.
Before Click: <ul class="sidebar-submenu" style="display: none;">
After Click: <ul class="sidebar-submenu show" style="display: block;">
I think this is code for that,
$(document).ready(function() {
$('.sidebar-link').click(function(e) {
e.preventDefault();
var $this = $(this);
if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.next().slideUp(350);
} else {
$this.parent().parent().find('sidebar-submenu-item .sidebar-submenu').removeClass('show');
$this.parent().parent().find('sidebar-submenu-item .sidebar-submenu').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
}
});
How to modify to get expected output. Please help me!
Try this:
$('.sidebar-link').click(function (e) {
e.preventDefault();
$('.show').removeClass("show");
$('.show').css("style","none");
......
});
try this:
$(document).ready(function() {
$('.sidebar-link').click(function(e) {
e.preventDefault();
var $this = $(this);
document.querySelectorAll('.sidebar-link').forEach(el=> {
el.classList.remove('show')
});
e.classList.add('show');
$this.parent().parent().find('sidebar-submenu-item .sidebar-submenu').removeClass('show');
$this.parent().parent().find('sidebar-submenu-item .sidebar-submenu').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
});
Goal
clicking on a member of the <ul> selects/deselects it.
if class=allSearch is selected any other li's that are already selected are de-selected.
if allSearch is selected and then notAllSearch is selected, allSearch is deselected.
Problem
Goal 3 is not working, which doesn't make sense to me because it should be (and is) basically the same code used in Goal 2.
Here's the code:
HTML
<ul class="menu vertical" id="searchMenu">
<li id="allSearch" class="allSearch selected">All</li>
<li id="notAllSearch" class="notAllSearch">User</li>
<li id="notAllSearch" class="notAllSearch">Artists</li>
<li id="notAllSearch" class="notAllSearch">Events</li>
</ul>
JS:
$(document).ready(function() {
$('#searchMenu li').click(function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else if ($(this).hasClass('notAllSearch')) {
$('#allSearch').removeClass('selected')
$(this).addClass('selected');
}
else if ($(this).hasClass('allSearch')) {
$('#notAllSearch').removeClass('selected')
$(this).addClass('selected');
}
else
$(this).addClass('selected');
});
})
Try this : instead of ID work on CLASS for this
$(document).ready(function() {
$('#searchMenu li').click(function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else if ($(this).hasClass('notAllSearch')) {
$('.allSearch').removeClass('selected')
$(this).addClass('selected');
}
else if ($(this).hasClass('allSearch')) {
$('.notAllSearch').removeClass('selected')
$(this).addClass('selected');
}
else
$(this).addClass('selected');
});
});
Here is the pen to test
ok so I have this script that controls an open/close of menu ....
of the three major functions (seen below) the first two work well in that the button-toggle changes its class (to an X) "active" which makes it an X.
However the fourth (commented out )function doesn't work... This was designed so that when you click on the body or anywhere other than the menu when it is open , it will close. please can someone help me to rewrite the last function so that it works.
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function () {
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
/*$('body').on('click', function(e){
if( !$(this).closest('#menu, .navbtn, .nav-toggle').length) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
e.stopPropagation();
};
});*/
});
I have provided a JSFiddle below (The menu is set to full colapse on startup not open as in the demo fyi)
http://jsfiddle.net/greggy_coding/ppX53/66/
Use e.target instead of this, as this refers body and not current clicked element.
event.target
The DOM element that initiated the event.
$('body').on('click', function (e) {
if (!$(e.target).closest('#menu, .navbtn, .nav-toggle').length) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
e.stopPropagation();
};
});
Updated Fiddle
Here is the modified javascript that would work:
$(document).ready(function(){
$('#menu').multilevelpushmenu();
});
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function (e) {
e.stopPropagation();
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
$('#menu').on('click', function(e) {
e.stopPropagation();
});
$('body').on('click', function(e){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
});
});
Here is the forked working jsfiddle:
http://jsfiddle.net/ytnLyqrv/1/
That's the html of my menu:
<ul class="nav">
<li>A</li>
<li><a href="#b" >B</a></li>
<li><a href="#c" >C</a></li>
<li><a href="#d" >D</a></li>
</ul>
I want that, after I clicked on a link in the menu, the active class will be added to the clicked <li>.
Thanks in advance
Use jquery
$("li a").click(function() {
$('li a').not(this).removeClass('active');
$(this).toggleClass('active');
});
DEMO Updated
He is not asking for a jQuery solution. But that jQuery would be the ideal choice, here is how to do it with javascript, best practices, event delegation and modern. Perhaps someone learns something new from it as well.
http://jsfiddle.net/N9Hem/
window.onload = function(){
(function(){
var els = [];
var doc = document;
var get = function(id){return doc.getElementById(id);};
get('clickable').onclick = function(evt){
evt = evt || window.event;
var el = evt.target || evt.srcElement;
els = doc.querySelectorAll('#clickable a');
if(el.nodeName == "A"){
for(var i = els.length - 1; i >= 0; i -= 1){
els[i].className = '';
};
el.className = 'active';
};
};
})();
};
If you use jQuery then you could use code like this:
$(function () {
$(".nav a").click(function () {
$(".nav a").removeClass("active");
$(this).addClass("active");
});
});
Try this with jQuery
$('#nav li a').click(function(){
$('#nav li a').removeClass('active');
$(this).addClass('active');
});
Here is a prototype that doesn't use jquery as you didn't request it on your question.
It searches for the current element with the active class, remove it and add the class to the clicked one.
Javasript Function
function activeThis(element){
var current = document.getElementsByClassName("active")[0];
current.className = null;
element.className="active";
}
HTML code
<a href="#b" onclick="activeThis(this)">
I hope I got what you want... I add eventHandlers to <ul>. On click remove clicked from previous elem and set clicked-class (if current class is active??)
<ul class="nav">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<script>
var clickedElem = null;
document.getElementsByClassName("nav")[0].addEventListener("click", function (e) {
if (clickedElem)
clickedElem.removeAttribute("class");
// check if e.srcElement.className is active?? that's what you want?
e.srcElement.className = "clicked";
clickedElem = e.srcElement;
});
</script>
This one should works for you
elems =document.getElementsByClassName("nav")[0].getElementsByTagName("a");
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener("click", function (e) {
for (var i = 0; i < elems.length; i++) {
elems[i].className="";
};
this.className = "active";
});
}
I guess this will work
var navlinks = document.getElementByClass('nav').getElementsByTagName('a');
for (var i = 0; i < navlinks.length; i++) {
if(navlinks[i].className == 'active'){
navlinks[i].parentNode.parentNode.parentNode.className = 'YOUR CLASS';
}
}
Check my fiddle
I hope this is what you want
http://jsfiddle.net/arunberti/ftZzs/
a:visited
{
color:green;
}
a:active {color:yellow;}
a:link {color:red;}
Try this:
$('.nav li').click(function(e) {
$(this).addClass('selected').siblings().removeClass('selected');
});
Alternatively, if you want to attach the click event to the a:
$('.nav a').click(function(e) {
e.preventDefault();
$('.nav a').removeClass('selected');
$(this).addClass('selected');
});
Example fiddle
thats quite easy
jQuery CODE:
$('.nav li a').on('click',function(){
$('.nav li').each(function() {
var anc=$(this).find('a');
if(anc.hasClass('active'))
{
$(anc).removeClass('active');
}
})
$(this).addClass('active');
})
Edited:
Code is refined
Happy Coding :)
I have a list item with a radio button input in each, on click of the list item the input is checked. However, if clicked again I want to remove the class and deselect the option. I can't seem to get anything to work however.
function setupToptions() {
if ($('ul.top-options input').length) {
$('ul.top-options li').each(function(){
$(this).removeClass('active');
});
$('ul.top-options li input:checked').each(function(){
$(this).parent('li').addClass('active');
});
};
};
http://jsfiddle.net/BKgdc/4/
What is wrong?
$('ul.top-options li input[type=radio]').click(function() {
if(!$(this).closest('li').hasClass('active')){
$('ul.top-options li').removeClass('active');
$(this).closest('li').addClass('active');
}else
$(this).removeAttr('checked').closest('li').removeClass('active');
});
http://jsfiddle.net/BKgdc/8/
You need to have an event handler :
$('ul.top-options input').change(function(){
if ($('ul.top-options input').length) {
$('ul.top-options li').each(function(){
$(this).removeClass('active');
});
$('ul.top-options li input:checked').each(function(){
$(this).parent('li').addClass('active');
});
}
});
but your code can be simplified as
$('ul.top-options input').change(function(){
$('ul.top-options li').removeClass('active');
$('ul.top-options li input:checked').parent('li').addClass('active');
});
See demonstration
$(document).ready(function() {
$li = $('ul.top-options li');
$li.click(function() {
if(!$(this).hasClass('active')){
$li.removeClass('active')
.filter(this).addClass('active').find('input').prop('checked', true);
} else {
$(this).removeClass('active');
$(this).find('input').prop('checked', false);
}
});
$li.filter(':has(:checked)').click();
});
Your solution would be to use checkboxes instead of radio buttons. No need for any javascript when using checkboxes.
If you want to deselect a radio button you should remove it's selected attribute. :checked only applies on checkboxes.
You would likely need to do this:
$li = $('ul.top-options li');
$li.click(function () {
var self = $(this);
$li.not(self).removeClass('active');
(self.hasClass('active') ? (self.removeClass('active').find('input').prop('checked', false)) : (self.addClass('active').find('input').prop('checked', true)));
});
$li.filter(':has(:checked)').click();
alternate conditional form:
$li = $('ul.top-options li');
$li.click(function () {
var self = $(this);
$li.not(self).removeClass('active');
if (self.hasClass('active')) {
self.removeClass('active').find('input').prop('checked', false);
} else {
self.addClass('active').find('input').prop('checked', true);
}
});
$li.filter(':has(:checked)').click();
a fiddle to show in action: http://jsfiddle.net/ZK4th/