CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user3910313
user3910313

Reputation: 87

Javascript Menu Setting Class to Active

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>

Upvotes: 0

Views: 1496

Answers (3)

Quentin Engles
Quentin Engles

Reputation: 2832

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>

Upvotes: 2

invinciblejai
invinciblejai

Reputation: 1293

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/

Upvotes: 1

Johan Karlsson
Johan Karlsson

Reputation: 6476

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

Upvotes: 1

Related Questions