We Keep Coding

How do I make the active menu item highlighted?

I have a .services section which has a sidebar-menu. How can I make the item I clicked light white and write it into the existing JS code? I tried in the JS code to simply set the addition of css to the color property, but in the end all the items light up
Site http://ct03638.tmweb.ru/
Code jsfiddle.net/p7ubnje6/
$('.sidebar-menu li ').on('click', function(e) {
e.preventDefault()
var index_ = $(this).closest("li").index()
$('.sidebar-menu li').removeClass('big');
$(".sidebar-menu li:eq(" + index_ + ")").addClass('big');
});

Try add style for active link:
.sidebar-menu li.big a {
color: #FFFFFF;
}

On your webiste, you have
.sidebar-menu li a
which has a gray color (#777)
you have to change the color of the "a" tag, since it's "deeper" in the scheme

I would do it like this https://jsfiddle.net/Lmwqadp8/4/
$('.sidebar-menu').on('click', 'li', function () {
$(this).addClass('big').siblings().removeClass('big')
})
If I understand your question correctly

Reverse onClick Event onClick

Does anyone know how to assign an onClick to an object that performs one action, then when the user clicks on the same object, the action is reversed?
$('#image').click(function() {
$('#foo').css({
'background-color': 'red',
'color': 'white',
'font-size': '44px'
});
});
So clicking on #image will either add the changes to #foo or reverse changes.
Fiddle: http://jsfiddle.net/Sx5yH/804/
Any suggestions?

Don't manipulate with inline styles directly, this is not very flexible approach. Instead you want to toggle class that holds necessary styles:
$('#image').click(function() {
$('#foo').toggleClass('active');
});
where the class active is defined like this:
#foo.active {
background-color: red;
color: white;
font-size: 44px;
}
Demo: http://jsfiddle.net/Sx5yH/812/

Specifically in your case - it is better to assign a class to the object. Then you can use the jquery toggle functionality to add/remove the style.
CSS
#image.selected {
background-color: red;
color: white;
font-size: 44px;
}
JavaScript
$('#image').click(function() {
$('#image').toggleClass("selected");
});

http://jsfiddle.net/gb0udnft/1/
You can use a boolean value to determine whether or not it's been clicked, then use a ternary statement to do whatever depending if it's true or false.
(boolean) ? true : false;
You could also use the innate JQuery toggle() function
http://jsfiddle.net/gb0udnft/2/
$('#image').toggle(function() {
// do whatever
}
, function() {
// do whatever
});
or use a css class back and forth by using .toggleClass(), .addClass(), or .removeClass()

how do I modify a :hover style using JavaScript / jQuery?

I have a :hover style definition declared in the CSS stylesheet file:
.myclass:hover {
border-color: red;
background-image: url('http://goo.gl/zdLfy');
}
Now, under given conditions, I want to change the background-image for this hover style.
I don't know how to do this using JavaScript / jQuery. Is this possible? How?

You can add a new style tag cascade over the previous declaration. assuming the css in in the head tag
$('head').append('<style>#element:hover {/
background-image: url("http://new.image/url");/
}/
<style>');

$('#element').hover(function() {
//on hover
if(condition === true) {
$(this).addClass('newBGImage');
}
}, function() {
//when hover ends
if($(this).hasClass('newBGImage')) {
$(this).removeClass('newBGImage');
}
});

Make your CSS be something like this:
.myclass:hover {
border-color: red;
background-image: url('http://goo.gl/zdLfy');
}
.specialCondition:hover {
background-image: url('http://anotherURL');
}
And then, for that special condition do:
$('.myclass').addClass('specialCondition');
And when the special condition is no longer there, remove the class:
$('.myclass').removeClass('specialCondition');
This way you keep your background-urls where they belong, in the CSS

You want to add a class that has the new background and then on hover use something like
$(this).addClass("YourClassName");
and then on leave
$(this).removeClass("YourClassName");

How to make specific button to stay active ? CSS, Javascript

having a problem, I have a javascript content switcher on a page, but I can't seem to get one thing working - how to make a clicked button stay active after it's clicked?
Here's a code:
JS
<script type="text/javascript">
function switch1(div) {
var option=['one','two','three'];
for(var i=0; i<option.length; i++) {
if (document.getElementById(option[i])) {
obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none";
}
}
}
window.onload=function () {switch1('one');}
</script>
CSS
#switchables li a {
color: #262626;
text-decoration: none;
display: inline-block;
padding-top: 14px;
padding-right: 34px;
padding-bottom: 10px;
padding-left: 33px;
background-image: url(img/catButBcgr.jpg);
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: none;
border-right-color: #E1E1E1;
border-left-color: #FFF;
}
#switchables li a:hover {
background-image: url(img/catButBcgrH.jpg);
}
#switchables li a:active {
background-image: url(img/catButBcgrA.jpg);
}
HTML
<ul id="switchables">
<li><a class="active" href="javascript:void[0];" onclick="switch1('one');">OVERVIEW</a></li>
<li><a class="active" href="javascript:void[0];" onclick="switch1('two');">CATEGORY</a></li>
<li><a class="active" href="javascript:void[0];" onclick="switch1('three');">CATEGORY</a></li>
</ul>

You need to make an "Active" class and add it to the button when clicked.
#switchables a:active, #switchables a.active {
background-image: url(img/catButBcgrA.jpg);
}
It's easy using jQuery:
$(document).ready(function() {
myInit()
})
function myInit() {
$('#switchables a').click(function() {
$('#switchables a').removeClass('active')
$(this).addClass('active')
})
}

This is a nice opportunity to learn. Diodeus' answer is completely right, but his jQuery code does horrible things on the background, see the comments:
$(document).ready(function() {
myInit()
})
function myInit() {
// on the following line, jQuery creates an array of objects (a tags)
// (costly operation!) and adds click listener to each of them
$('#switchables a').click(function() {
// on the following line, jQuery creates the crazy God object again
// and throws it off after this command
// for each a tag and tries to remove class active from it
// in only one case it actually does something - mere class removal
// btw removeClass is ridiculous function if you dig into jQuery 1.10 source
$('#switchables a').removeClass('active')
// this = the source of click event, not jQuery object
$(this).addClass('active')
})
}
This is just a very short code, now imagine you write whole web this style. It will be observably slower, consuming much more resources.
If you insist on jQuery, try to write reusable code a little:
function myInit() {
// jQuery object is created only once
var $anchors = $('#switchables a');
$anchors.click(function() {
// ...and reused here
$anchors.removeClass('active')
$(this).addClass('active')
});
}
But you'd do much better job using native javascript
var items = document.querySelectorAll("#switchables a");
var prev = items[0];
[].forEach.call(items,function(item) {
item.addEventListener("click",function() {
// no need to loop every a tag here
prev.classList.remove("active");
item.classList.add("active");
// remember previous active a tag
prev = item;
});
});
document.querySelectorAll is a live collection which is something that can't be achieved by any javascript library, it is implemented in underlying and more effective code of the browser.
Advice Don't use jQuery until you know Javascript well. Without that knowledge, you will be able to implement just basic animations, copy&paste some plugins and nothing more. And when you know Javascript on some level, you will probably see very little reason to use jQuery anymore.
In the code above, jQuery can be easily removed:
1: $(document).ready(handler) -> document.addEventListener("readystatechange",handler);
2: $('#switchables a') -> document.querySelectorAll("#switchables a");
3: $(nodeList).click(handler) ->
[].forEach.call(nodeList,function(node) {
// you can reuse node here, unlike the jQuery
node.addEventListener("click",handler);
});
4: $(node).removeClass(className) -> node.classList.remove(className)
5: $(node).addClass(className) -> node.classList.add(className)
It is a few chars longer. But it is more reusable, readable, effective and it is not God object or Cargo cult programming.
The native codes above are javascript standards and are supported in any decent browser. Three years ago, when Diodeus provided his answer, IE8 was an issue here. But it is dead now (under 2% worldwide according to gs.statcounter). Help it die completely by not supporting it.

How can I change a CSS values on a DIV by clicking on an A tag?

When any <a> tag is clicked with the id="cnt" I want to set the border color of div#fancybox-content to #000. My attempt:
$(document).ready(function(){
$('a#cnt').click(function(){
$("#fancybox-content").css("border-color","#000");
});
});
This code does not work.

are you sure you meant "id of 'cnt'"? you said "When any a tag is clicked"... is there more than one?
Make sure you set the other border parameters as well
If there is more than one, use a class:
$().ready( function() {
$("a.cnt").click(function() {
$("#fancybox-content").css({"border-width":"1px", "border-style":"solid", "border-color":"#000"});
});
})
see - http://jsbin.com/avuxe3/3
If there really is one:
$().ready( function() {
$("#cnt").click(function() {
$("#fancybox-content").css({"border-width":"1px", "border-style":"solid", "border-color":"#000"});
});
})
enter code here

The trick is in which selector you use. If you have a single HTML element that has an ID, use the # selector. If there is more than one element, you should use a class rather than ID and use the . selector. Below are examples:
If you have a single A tag, with an id="cnt" then you would use:
$('a#cnt').click(function() {
$('#fancybox-content').css({"border":"solid 1px #000"});
});
If you have more than one anchor with the cnt notation, set it as class="cnt" and use:
$('a.cnt').click(function() {
$('#fancybox-content').css({"border":"solid 1px #000"});
});
Better yet, keep your styles in a stylesheet like this
.borderOn { border: solid 1px #000; }
And then toggle this class on (and off if you like) with your links' click events:
$('a.cnt').click(function() {
$('#fancybox-content').addClass('borderOn');
});