We Keep Coding

Issue with changing class names using javascript/jquery

I'm looking to change the background color of the currently clicked on tab in my navigation menu. Then when I click a different tab, I want the old one to change back to the original background color. I've seen this tons of places, but every tutorial I follow hasn't worked for me.
Here is the html code I have for the navigation. Basically, I want to change the class "member_nav" to "member_nav_clicked" and then back to "member_nav" when a different tab is clicked.
<div class="member_nav">
Nav 1
</div>
<div class="member_nav">
Nav 2
</div>
<div class="member_nav">
Nav 3
</div>
<div class="member_nav">
nav 4
</div>
<div class="member_nav">
Nav 5
</div>
I'm not going to include any of the javascript functions I've tried, since none of it was working.

Add an active class, then on a click event find the currently active element and remove the active class with $('.active').removeClass('active') after this set the active class to the clicked element $(this).addClass('active').
#adeneo's anwser in the comments is actually better.
$(this).addClass('active').siblings().removeClass('active');

To be honest, this is some jQuery 101... i suggest you read up on the basics. I set up a jsFiddle for you, and i hope you wont just copy paste it but also try to learn something from it.
You can find it here: http://jsfiddle.net/wUpYh/1/
The code:
$('a').on('click', function(){
$('.member_nav_clicked').removeClass('member_nav_clicked').addClass('member_nav');
$(this).closest('.member_nav').removeClass('member_nav').addClass('member_nav_clicked');
});
So what happens is, i remove the member_nav class and add the clicked class. The line above it will take care of the previous clicked item. When an element has the active class, it will be removed before asigning it to the new clicked element.
But to be honest, a nicer way of doing this, would be to assign an active class and leave the normal class as it is. Like this:
$('a').on('click', function(){
$('.member_nav_clicked').removeClass('member_nav_clicked');
$(this).closest('.member_nav').addClass('member_nav_clicked');
});

changing dynamically the "onlink" id in css

I made a navigation bar as tabs in my website, and I used the onlink identity to specify the current tab with certain characteristics. My problem is that when I change tabs, I don't know how to make the previous tab id set as none and the current one set as onlink.
Here's the navigation bar code:
<div id="indNavBar">
<div id="indHolder">
<ul>
<li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd')" id="onlink">Single Indicator</a></li>
<li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');">Double Indicators</a></li>
</ul>
</div>
</div>
There's a simple ways but it's somehow stupid, which is to make each current tab as a whole page and when I click another tab, it's just given the url of clicked tab which goes to the page with specified onlink id, but this requires reloading the whole page that's why I'm seeking a better solution.

You can get the control being clicked by passing this in javascript method
onclick="DisplayDIV('IndPage', this);
function DisplayDIV(IndPage, sourceObj)
{
alert(sourceObj.id);
}

Are you ok do use the jQuery Library?
If so you can avoid putting inline javascript into your html and use toggleClass http://api.jquery.com/toggleClass/

You are trying to use HTML ids in the wrong way.
Ids are unique identifiers for HTML tags. They should not change at runtime.
Instead, apply CSS classes to the tab you want to be visible.
CSS
.hide {display:none;}
Javascript
var indpage = document.getElementById("IndPage");
if (!indpage.classList.contains("hide")) {
indpage.classList.add("hide");
}
Then your HTML at runtime will change to
<div id="IndPage" class="hide">...</div>
This is the standard approach.
And you can do much more with this idea.
I agree that making a tab a whole page is not a good idea. You can use javascript to apply CSS classes to hide and remove that class to show again.
Its also a good idea to learn how to separate your javascript from your HTML. Please read some more tutorials on this. One for instance: Unobtrusive Javascript

Here is a jquery way to do it: http://jsfiddle.net/surendraVsingh/HyAhL/
$('#indHolder a').click(function(){
$(this).attr('id', 'onlink');
$(this).parent().siblings().find('a').removeAttr('id');
});​

I took hints from the answers above and it worked as the following:
function putOnlink(x){
document.getElementById('onlink').id = "none";
$(x).attr('id','onlink');
}
and the tabs code is:
<div id="indNavBar">
<div id="indHolder">
<ul>
<li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd');putOnlink(this);" id="onlink">Single Indicator</a></li>
<li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');putOnlink(this);document.getElementById('onlink').id='none'">Double Indicators</a></li>
</ul>
</div>
</div>
I just wanna not that in the second link I had to change the id of the first link twice because it didn't work once, maybe cause its id is set in the tag not just when clicked.

Show/Hide On Click

I have one area of space and two body's of text to show. I have two "hyperlinks" above this area and would like to use those to show/hide the text below. Upon first loading the page, nothing will be showing except for the two links. When you click one link it shows the body of text. When you click the other link it will hide the previous body of text and show the new text. There are only two hyperlinks, but I would like for the user to be able to toggle back and forth at their convenience. Is this possible? Previously I was using javascript to unhide the text because they were in two different areas. I am not too experienced with writing code. I have found some other answers on this topic useful but most of them use buttons and on click listeners. Is there a way to do this using a hyperlink? Code examples are very much appreciated!

You could define a class in CSS that says "Don't show the text in here" then use JS from the hyperlink click to switch the class of the element?
so your html will contain:
<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a>
<div id="text1" class="hide"> text1 </div>
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a>
<div id="text2" class="hide"> text2 </div>
Your CSS would contain:
div.hide { display:none; [your properties]; }
div.show { [your properties]; }
and the your JS would look something like this:
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
Does this help at all?

<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"> </a>
in javascript you can do this if you use jQuery:
function myLinkButtonClick()
{
$("#myDiv").hide();
}
or
function myLinkButtonClick()
{
$("#myDiv").show();
}
Alternatively you can do .toggle
function myLinkButtonClick()
{
$("#myDiv").toggle();
}

Many will agree that using anchor tags to execute Javascript (and do nothing else) is a little on the messy side, since, among other things, it generates a hash tag in the address bar which can confuse users. That isn't to say that they don't have their place in JS execution.
It is very possible to achieve this however. Here is one possible solution:
Link1
Link2
<div id="div1">Text1</div>
<div id="div2" style="display:none;">Text2</div>
<script>
var currentDiv = document.getElementById("div1");
function show(divID) {
var div = document.getElementById(divID);
currentDiv.style.display = "none";
div.style.display = "block";
currentDiv = div;
}
</script>
The script tag defines a variable and a function: currentDiv, which references the currently displayed div element and a show function, which is used for hiding the currently displayed div and showing a new one.
The anchor tags at the top, when clicked, call the show function, replacing the currently shown element with the one the anchor tag specifies.
In order to get elements to show/hide, the code changes the element's CSS display attribute. A value of block shows the div element, and a value of none hides it. The second div has its display property set to none when the page loads. Javascript will change this attribute when a link is clicked.
No, you do not need JQuery to do this, but it can help.

There's a nice jQuery script that does something along these lines, have a look to see if it's any good for you:
http://api.jquery.com/slideToggle/

This is possible, but a more user friendly way of doing this would be with something like jquery tabs. It's very easy to do it with jquery UI's tab feature, it's all HTML markup with a script that just runs .tabs(); as the function on the ID of the tab element.
Here is a link: Jquery Tabs

Tabs would be the best way to do this. There's plenty of tutorials around for jQuery tabs - here's a fairly basic one which outlines the concepts pretty well, and here's a more advanced one (which goes into using CSS to generate rounded corners on tabs).

Toggle going wrong?

I have made some menu with a slide down submenu. It should work fine but for some reason it doesn't work. I mean if you look at this fiddle: http://jsfiddle.net/yJdFu/2/ , you'll see that the big menus don't slide down when the submenu toogles.
Can you tell me why isn't it working ?

It is actually working. The problem is you have a specified height to the list items. So the submenu is appearing below the existing items.
Remove the height from the list items.
Updated Fiddle
You weren't missing any closing tags. The html is correct. Error was in CSS. Also, I altered the jquery a bit. not sure why you were using .find() when the item can be called by it's class, and I specified which toggle to use.
This fiddle uses jquery which specifies the toggle only occurs on the "dashboard" link. Otherwise the sub navigation closes when one of its links is clicked.

You are missing a closing </li> tag.
<li class="dashboard"><a href="#">
<img src="assets/gfx/dashboard.png" alt="Dashboard">
<span>Dashboard</span></a>
</li>
see here http://jsfiddle.net/yJdFu/4/
As Roland said above, you may also want to look at the built-in JQuery UI Accordion before rolling your own solution.

Show hidden div with bookmarks

Basically I hide all of the answer divs on the page, but I want to show a div if the a user has clicked a bookmarked link to it.
Here's the javascript code
<script type="text/javascript">
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".faq_answer").hide();
//toggle the componenet with class msg_body
$(".faq_question").click(function(){
$(this).next(".faq_answer").slideToggle("normal");
});
});
</script>
The resulting HTML for the section is
<li>
<div class="faq_question">
Question
</div>
<div class="faq_answer">
<p>Text to show</p>
</div>
</li>
EDIT
The question was how do I do it...Figured it out though after the answers here.

window.location.hash will give you the value "#" in your URL. You can use that to build a selector.
// if visiting /index.php#item1
$(window.location.hash).show(); // $('#item1').show();

You can look for the #url-blah in the URL in javascript and display the corresponding section?

I would assume you would need to add a class to the div that hides it and shows it based on the click function
I dont really see a question here though

To accomplish this you are going to most likely need to change your document structure a bit, as you cannot reference any of the specific "faq_answer" items individually.
Typically what I would do here is use a specific ID for each of the answers, then you can use javascript with a show action to be able to toggle visibility.
For an example of my HTML and jQuery code, you can view this page, look at the version history section.