Chamar class do CSS em Javascript

Front-end
#1

Tenho uma dúvida que é a seguinte, eu tenho um menu composto mais ou menos desse tipo em meu html

<a href="index.html" class="corrente">Inicio</a> <a href="contato.html" >Contato</a> <a href="sair.html" >Sair</a>

percebe se que quando estou no meu index.html ele chama a class ‘corrente’ que está configurado no meu CSS, então minha dúvida é a seguinte quero deixar meu menu em HTML sem chamar a classe currente e quero chama-la a partir do meu código javascript dependendo da página onde eu esteja.
É possível fazer isso através de um id ou algo do tipo??
Obrigado a todos!

#2

Achei um parecido nesse site vou tentar alterar e ver o que vai dar

http://scriptbrasil.com.br/forum/index.php?showtopic=44172

#3

Não sei se entendi bem a sua dúvida, mas acredito ser algo do tipo:

<html>
	<head>
		<title></title>
	<style>
		a:link{
			text-decoration: none;
		}

		.corrente{
			font-size: 28px;
			text-decoration: none;
			color: gray;
		}

		.normal{
			font-size: 20px;
			text-decoration: none;
			color: lightgray;
		}
	</style>
	<script languag="javascript">
 		function abertura(){
	 		document.getElementById("inicio").className = "corrente";
 		}

		function trocaMenu(id){
			document.getElementById("inicio").className = "normal";
			document.getElementById("contato").className = "normal";
			document.getElementById("sair").className = "normal";

			if(id=="I"){
				document.getElementById("inicio").className = "corrente";
			} else if(id=="C"){
				document.getElementById("contato").className = "corrente";
			} else if(id=="S"){
				document.getElementById("sair").className = "corrente";
			}
		}
	</script>
	</head>
	<body onLoad="abertura();">
		<a href="#" id="inicio" onClick="trocaMenu('I');">Inicio</a>
		<a href="#" id="contato" onClick="trocaMenu('C');">Contato</a>
		<a href="#" id="sair" onClick="trocaMenu('S');">Sair</a>
	</body>
</html>
#4

Segue código ajustado melhor

<html>
	<head>
		<title></title>
	<style>
		a:link{
			text-decoration: none;
		}

		.corrente{
			font-size: 28px;
			text-decoration: none;
			color: gray;
		}

		.normal{
			font-size: 20px;
			text-decoration: none;
			color: lightgray;
		}
	</style>
	<script languag="javascript">
 		function abertura(){
	 		trocaMenu("I");
 		}

		function trocaMenu(id){
			document.getElementById("inicio").className = "normal";
			document.getElementById("contato").className = "normal";
			document.getElementById("sair").className = "normal";

			if(id=="I"){
				document.getElementById("inicio").className = "corrente";
			} else if(id=="C"){
				document.getElementById("contato").className = "corrente";
			} else if(id=="S"){
				document.getElementById("sair").className = "corrente";
			}
		}
	</script>
	</head>
	<body onLoad="abertura();">
		<a href="#" id="inicio" onClick="trocaMenu('I');">Inicio</a>
		<a href="#" id="contato" onClick="trocaMenu('C');">Contato</a>
		<a href="#" id="sair" onClick="trocaMenu('S');">Sair</a>
	</body>
</html>
#5

Isso mesmo funcionou certinho aqui, vlw!

#6

Use o JQuery para acessar o css.
Segue o link para axilia-lo: http://www.w3schools.com/ :wink:

#7