0

I only got into Javascript, HTML and CSS a few days ago, so I'm quite new to it.... Anyway, I'm trying to make a vertical menu with Twitter's Bootstrap. I've managed to make the menu just fine, but I want to make it so when you click on a button on the menu, it will make the button have the "active" class, I tried my best to do it, it works, but only if you select the menu options in order, here is my code and if somebody can help me fix this up, that'd be great!

<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
	<link rel="stylesheet" href="stylehelp.css">
	<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
	<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
	</head>

<body>
<script>
function navigationSwitch1(){
document.getElementById("oogabooga").innerHTML = "It works.";
document.getElementById("gotclass").className = "placeholder"
document.getElementById("gotclass").id = "noclass2"
document.getElementById("noclass").className = "active gotclass";
document.getElementById("noclass").id = "gotclass";
}
function navigationSwitch2(){
document.getElementById("oogabooga").innerHTML = "It works.";
document.getElementById("gotclass").className = "placeholder"
document.getElementById("gotclass").id = "noclass"
document.getElementById("noclass1").className = "active gotclass";
document.getElementById("noclass1").id = "gotclass";
}
function navigationSwitch3(){
document.getElementById("oogabooga").innerHTML = "It works.";
document.getElementById("gotclass").className = "placeholder"
document.getElementById("gotclass").id = "noclass1"
document.getElementById("noclass2").className = "active gotclass";
document.getElementById("noclass2").id = "gotclass";
}
</script>

	<title>Help</title>
<div class="nav">
<div class="container">
<ul class="pull-left nav nav-pills">
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="cars.html">Cars</a></li>
</ul>

<ul class="pull-right nav nav-pills">
<li><a href="customerservice.html">Customer Care</a></li>
<li class="active"><a href="help.html">Help</a></li>
</ul>
</div>
</div>

	<div class="container1 col-md-10">
		<ul class="nav nav-pills nav-stacked col-md-10">
			<li class="active" id="gotclass" onclick="navigationSwitch1()"><a href="#">Test</a></li>
			<li class="placeholder" id="noclass1" onclick="navigationSwitch2()"><a href="#">Test1</a></li>
			<li class="placeholder" id="noclass2" onclick="navigationSwitch3()"><a href="#">Test2</a></li>
		</ul>
	</div>

<div class="text">
	<div class="container">
		<p id="oogabooga">This is some simple text</p>
	</div>
</div>


	</body>

</html>

Improve this question

3 Answers 3

Reset to default
2

Notice the usage of this inside the navSwitch first argument. It's all a matter of getting the logic to work.

In the onclick handler onclick="navSwitch(this)" the this refers to the current element which are often called nodes. So the argument for navSwitch is named node. To understand usage of this well you'll need to study object oriented programming. Do a google search for it.

You wanted to know about the setting of current.

Current is just what ever element was last clicked on. The reasoning is that which ever last element is available that will be the one that will have its active class unset.

Being that the element clicked on will be the active one we set that to active, but before we do that we set current to that clicked element.

As far as why I chose the gotclass element. That was set arbitrarily because that's the one you had set active in the first place. If you change that in the future you can always just add the gotclass class to some other element so that will be the first one active as long as you have the active class already set on it.

In short it's the order in which you use the variables, and their assigned values. Mess with the variable by assigning different elements to it to see what happens.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="stylehelp.css">
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
    </head>

<body>
<script>

var current = null;
function navSwitch(node){
    if(current === null){
        current = document.getElementById("gotclass");
    }
    current.className = "placeholder";
    current = node;
    current.className = "active";
}
</script>

    <title>Help</title>
<div class="nav">
<div class="container">
<ul class="pull-left nav nav-pills">
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="cars.html">Cars</a></li>
</ul>

<ul class="pull-right nav nav-pills">
<li><a href="customerservice.html">Customer Care</a></li>
<li class="active"><a href="help.html">Help</a></li>
</ul>
</div>
</div>

    <div class="container1 col-md-10">
        <ul class="nav nav-pills nav-stacked col-md-10" id="nav0">
            <li class="active" id="gotclass" onclick="navSwitch(this)"><a href="#">Test</a></li>
            <li class="placeholder" id="noclass1" onclick="navSwitch(this)"><a href="#">Test1</a></li>
            <li class="placeholder" id="noclass2" onclick="navSwitch(this)"><a href="#">Test2</a></li>
        </ul>
    </div>

<div class="text">
    <div class="container">
        <p id="oogabooga">This is some simple text</p>
    </div>
</div>


    </body>

</html>
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Hey, tried this out and it worked like a charm! But I would like to understand what this code does so I can use it in the future! From what I read you've got a var called current, your creating a function called navSwitch what does the node mean? then your checking if current is equal to null, which it is, and then your setting it to the getElementById gotclass, then you say set the classname of current to placeholder, current to node and current 's classname to active? Can you explain this please? I'm quite confused haha
Give me some time I'll explain in detail.
It's fine if you're confused. This stuff confused me too when I was learning it.
Alright, thanks because I really want to know how to actually make this because I will use it in the future :D
Cool. Just keep experimenting. And read. Read about javascript like the wind. :)
1

You can do something like this:

$(document).ready(function() {
    $(".container1 ul li").click(function(){   
        $(".container1 .active").removeClass("active");
        $(this).addClass("active");
    });
}

and change html to something like this:

<div class="container1 col-md-10">
    <ul class="nav nav-pills nav-stacked col-md-10">
        <li><a href="#">Test</a></li>
        <li><a href="#">Test1</a></li>
        <li><a href="#">Test2</a></li>
    </ul>
</div>

Check it out here: JSFiddle

Improve this answer

Comments

1

PFB code in javascript,Hope it'll help. It can be done with jquery as well.

Code :

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="stylehelp.css">
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
    </head>

<body>
<script>
function navigationSwitch123(e){
resetClasses();
document.getElementById(e.currentTarget.id).className = "active gotclass";
}

function resetClasses(){
document.getElementById("gotclass").className = "placeholder";
document.getElementById("noclass1").className = "placeholder";
document.getElementById("noclass2").className = "placeholder";
}
</script>

    <title>Help</title>
<div class="nav">
<div class="container">
<ul class="pull-left nav nav-pills">
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="cars.html">Cars</a></li>
</ul>

<ul class="pull-right nav nav-pills">
<li><a href="customerservice.html">Customer Care</a></li>
<li class="active"><a href="help.html">Help</a></li>
</ul>
</div>
</div>

    <div class="container1 col-md-10">
        <ul class="nav nav-pills nav-stacked col-md-10">
            <li class="active" id="gotclass" onclick="navigationSwitch123(event)"><a href="#">Test</a></li>
            <li class="placeholder" id="noclass1" onclick="navigationSwitch123(event)"><a href="#">Test1</a></li>
            <li class="placeholder" id="noclass2" onclick="navigationSwitch123(event)"><a href="#">Test2</a></li>
        </ul>
    </div>

<div class="text">
    <div class="container">
        <p id="oogabooga">This is some simple text</p>
    </div>
</div>


    </body>

</html>

fiddle for same : http://jsfiddle.net/invincibleJai/386qdudw/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.