We Keep Coding

on select a href change color in ul li

Here I use tab menu for select different tab i want to change the color of selected button, when I select button change it color
<div id="tabs">
<ul>
<li><a class="active" href="#" name="tab1">Tempu Services</a></li>
<li>Buy and Sale</li>
<li>Job Service</li>
</ul>
</div>
and my css id
and my JavaScript is
<script>
$(window).load(function(){
$("#tabs ul li a").click(function () {
$("#tabs ul li a").not(this).removeClass("active").addClass('unactive')
$(this).toggleClass("unactive").toggleClass("active");
});
});//]]>
</script>
i also use this script for this
<script>
$(document).ready(function() {
$("#contenty").find("[id^='tab']").hide();
$("#tabs li:first").attr("id","currenty");
$("#contenty #tab1").fadeIn();
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "currenty"){
return;
}
else{
$("#contenty").find("[id^='tab']").hide();
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current");
$('#' + $(this).attr('name')).fadeIn();
}
});
});
</script>
and i use jquery 1.9.1

The most minimal approach would be,
$("#tabs ul li a").click(function () {
var active_link = $("#tabs ul li a").filter('.active').removeClass('active'); // filter elements only with class active and remove it.
$(this).toggleClass("active"); // toggle active class of this element
});
DEMO

Try,
$("#tabs ul li a").click(function () {
$("#tabs ul li a").removeClass("active").addClass('unactive')
$(this).toggleClass("active unactive");
});
DEMO

$(document).ready(function () {
$("#tabs ul li a").click(function () {
$('#tabs ul li a.active').removeClass('active').addClass('unactive');
$(this).addClass('active');
});
});
Try wrapping the code in ready event handler instead of load.

One page website, show/hide divs, menu button will not stay selected

I'm trying to make a one page website with a menu (pictures, css roll over...), that will display a different div when each menu button is clicked. Only one div will be shown at time though and if one is already open it should be hidden. This is working well.
The problem I am having is that that the menu button which shows the result will not stay selected i.e. on the same picture as the roll over (hover).
HTML :
<ul class="menu">
<li class="home"><span class="displace"></span></li>
<li class="credits"><span class="displace"></span></li>
<li class="idea"><span class="displace"></span></li>
</ul>
<div id="content1">home text</div>
<div id="content2">credits text1</div>
<div id="content3">idea text</div>​
JS / jQuery :
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
$(function stay() {
$('menu').click(function stay() {
$('menu').removeClass('selected');
$(this).addClass('selected');
});
});
​
Demo: http://jsfiddle.net/anKT3/159/
I've tried creating a function to change the class, but I've not had any luck.

Change your stay() function to be as follows:
$(function stay() {
$('.menu li a').click(function stay() {
$('.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});

Here is JS fiddle
$(function stay() {
$('ul.menu li a').click(function () {
$('ul.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});

Add/Remove classes and using Cookie to remember selection

I have this simply piece of JQuery that toggle a class on anchor tags/links.
What I don't know is how do I make the class toggle or add/remove when the other links are clicked? Example: The class can only apply to the link that is click and cannot be on more than one at a time. That's where I am stuck. Well, I don't know how to do it.
Secondly how do I use the JQuery Cookie to keep the currently link active. I have downloaded the cookie extension.
Here is what I have done:
HTML:
<ul class="navbar">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
CSS:
.activeLink{
color: #930;
}
JQuery:
$(document).ready(function() {
$('.navbar li a').click(function(){
$(this).toggleClass('activeLink');
});
});
Thank you!!

Below is a solution that uses event propagation:
$(function() {
var $activeLink,
activeLinkHref = $.cookie('activeLinkHref'),
activeClass = 'activeLink';
$('.navbar').on('click', 'a', function() {
$activeLink && $activeLink.removeClass(activeClass);
$activeLink = $(this).addClass(activeClass);
$.cookie('activeLinkHref', $activeLink.attr('href'));
});
// If a cookie is found, activate the related link.
if (activeLinkHref)
$('.navbar a[href="' + activeLinkHref + '"]').click();
});​
Here's a demo (without the cookie functionality as JSFiddle lacks support).

Here is how I do it. It's a little simplistic, but it gets the job done without a lot of brain strain.
<ul class="navbar">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<script>
$(document).ready(function() {
$('.navbar li a').click(function(){
$('.navbar li a').css('color', 'black');
$(this).css('color', '#930');
});
});
</script>

JQuery tabs dynamic content with on click fadeout+fadein and slide without UI

I am absolutely beginner in JQuery (but I've some knowledge about JS and programming on other languages)
I have 2 aims:
very simple tabs (or anything for controls), on click with old (active) tab content fading out and then clicked tab content fading in (same place)
same as 1 but with horizontal content slide instead of fading.
I don't want JQuery UI, because that is overkill for a simple thing of this kind and I want to learn.
Aim 1, JS:
$(function () {
$("div.tabs > div:gt(0)").hide();
$("div.tabs ul a:first").addClass('selected');
$('div.tabs ul a').click(function () {
$("div.tabs > div").fadeOut('normal', function () {
$("div.tabs > div").fadeIn('slow');
});
$('div.tabs ul a').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
HTML:
<div class="tabs">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div id="first">
<h2>First content</h2>
</div>
<div id="second">
<h2>Second content</h2>
</div>
<div id="third">
<h2>Third content</h2>
</div>
</div>
How to find active div, instead of poking all divs with $("div.tabs > div") in fadeOut and in fadeIn lines?
Aim2:
I read about slideUp and slideDown but that is vertical, perhaps I've to use animate()?
How? If it's too complicated than it is good for me with vertical slide...

Aim 1: Just add an active class to the current content div. See demo for altered code.
Aim 2: There are several techniques to do it w/o jQuery UI, depends on what you want to achieve and where you want to use it. See the altered demo for some sliding effects.

Paul's answer simplified for aim1: without additional classes, optimized to "div" + $(this).attr('href') and solution for fadeout is div:visible:
$(function () {
$("div.tabs > div:gt(0)").hide();
$("div.tabs ul a:first").addClass('selected');
$('div.tabs ul a').click(function () {
var newDiv = "div" + $(this).attr('href');
$("div.tabs > div:visible").fadeOut('normal', function () {
$(newDiv).fadeIn('slow');
});
$('div.tabs ul a').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
Thanks Paul.

Return false doesnt work

i think my return false code isnt working properly. Take a look:
$(".home .options .tabs ul li a").click(function(e){
var qual = $(this).attr("href");
$(".content.home .options .tabs ul li").removeClass("active");
$(this).parent().addClass("active");
$(".content.home .options .holder .tab").hide();
$(".content.home .options .holder "+qual).show();
return false;
});
Here's my html code:
<div class="tabs">
<ul>
<li class="active">Lançamentos</li>
<li>Em Obras</li>
<li>Prontos para Morar</li>
</ul>
</div><!-- tabs -->
When i click, it does not go to the link, but jumps the page. Whats happening?
thanks!
UPDATE
Ok, i have updated the code. And still not working.

You need to cancel the click on the <a> tag, not the containing <li>.

You have wrote return false in click event of your li you should write it for <a> tag

You don't require to return true/false. OnClick functionality of anchor should work here. I tested below code. You can use firebug to debug the code.
$(".tabs ul li").click(function(e){
var qual = $(this).find('a').attr("href");
$(".tabs ul li").removeClass("active");
$(this).addClass("active");
});