Publicidade

Rafael Zilli

Mudar CSS por JAVASCRIPT

Bom dia. Desenvolvi um menu e gostaria que o background de um determinado LI mudasse de cor quando a respectiva pagina estiver aberta. Para saber a pagina corrente utilizei o seguinte codigo:

// pega a url e coloca na variavel url
var url = window.location.href;

// converte em String
url = url.toString()

// converte em um array separando pelos (=)
url = url.split("=");

// pega somente o ultimo elemento do array (nome do arquivo da pagina corrente)
var ultimoElemento = url[url.length - 1];

Para testar se está funcionando, utilizei if else:

if (ultimoElemento == "inicioProfessor"){
	document.write(ultimoElemento);
}
else {
	document.write("ola mundo");	
}

Funcionou normalmente. Então passei a tentar mudar o background do LI especifico:

if (ultimoElemento == "inicioProfessor"){
	$('item-inicio').css({"background-color":"#111"});
}
else {
	$('item-inicio').css({"background-color":"#FFF"});	
}

Mas não deu certo.

Gostaria de saber se alguém pode me ajudar com essa ultima parte, pois gostaria de continuar usando o mesmo método para pegar o nome do arquivo da pagina corrente.

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

o Seletor deve estar incorreto.
Repare a falta do seletor de id '#'

Ou seria uma classe?

Tenta assim
Caso o seu elemento/tag seja algo como:

<div id="item-inicio"></div>

Então use esse seletor:

$('#item-inicio').css({"background-color":"#111"});

Caso seja uma classe...

<div class="item-inicio"></div>

Utilize o seletor de class '.'

$('.item-inicio').css({"background-color":"#111"});
0

Compartilhar este post


Link para o post
Compartilhar em outros sites

gabrieldarezzo, obrigado pela observação, mas não resolveu :/

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Galera, consegui resolver o problema. Esqueci de declarar:

jQuery(function($){

...

});

:D

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!


Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.


Entrar Agora

  • Próximos Eventos

  • Conteúdo Similar

    • Por luiz de oliveiro
      olá, como posso atribuir um valor para dentro de uma input do tipo text desabitada, por exemplo
       
      var texto =prompt("o valor daqui vai para a input");
       
      <form>
      <input type="text" disable>
      </form>
      como eu poderia fazer com que o valor que eu digite na variavel 'texto' fosse para dentro do input desabilitado?
    • Por Clauido José
      Galera quero popular este array abaixo numa pagina asp como faria isso na verdade estou fazendo um treinamento de Angular no youtube e tem um modulo de angular integração com backend e no exemplo ele eusa php para popular a tabela só que sou programador asp gostaria de saber se tem como abaixo a pagina js com o array para popular a tabela
      var express = require('express'); var app = express(); app.use(express.static(__dirname + '/public')); app.use(express.bodyParser()); var contatos = [ {nome: "Bruno", telefone: "9999-2222", data: new Date(), operadora: {nome: "Oi", codigo: 14, categoria: "Celular"}}, {nome: "Sandra", telefone: "9999-3333", data: new Date(), operadora: {nome: "Vivo", codigo: 15, categoria: "Celular"}}, {nome: "Mariana", telefone: "9999-9999", data: new Date(), operadora: {nome: "Tim", codigo: 41, categoria: "Celular"}} ]; var operadoras = [ {nome: "Oi", codigo: 14, categoria: "Celular", preco: 2}, {nome: "Vivo", codigo: 15, categoria: "Celular", preco: 1}, {nome: "Tim", codigo: 41, categoria: "Celular", preco: 3}, {nome: "GVT", codigo: 25, categoria: "Fixo", preco: 1}, {nome: "Embratel", codigo: 21, categoria: "Fixo", preco: 2} ]; app.listen(process.env.PORT || 3412); app.all('*', function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); res.header('Access-Control-Allow-Headers', 'Content-Type'); next(); }); app.get('/contatos', function(req, res) { res.json(contatos); }); app.post('/contatos', function(req, res) { contatos.push(req.body); res.json(true); }); app.get('/operadoras', function(req, res) { res.json(operadoras); }); Detalhe o array de operadora va ser preenchido em uma combobox abaixo a pagina asp;:
      <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Contato Telefonicos</title> <script src="contatosBackend.js" type="text/jscript"></script> <script src="angular/angular.js" ></script> <script src="angular/angular-messages.js" ></script> <link href="../bootstrap/css/bootstrap.css" type="text/css" /> <style> .jumbotron{ width: 600px; padding: 15px 15px; text-align: center; margin-top:20px; margin-left: auto; margin-right: auto; } .table{ margin-top:20px; } .table th{ text-align:center; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size:16px } .table tr{ text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:14px } .form-control{ margin-bottom: 5px; } .selecionado{ background-color: #FF0; } .negrito{ font-weight:bold; } </style> </head> <body> <table class="table table-striped"> <tr ng-class="{'selecionado negrito': contato.selecionado}" ng-repeat="contato in contatos | limitTo: 2 | filter: {nome:criterioDeBusca} | orderBy:criterioDeOrdenacao:direcaoDaOrdenacao "> <td><input type="checkbox" ng-model="contato.selecionado" /></td> <td>{{contato.nome | uppercase}}</td> <td>{{contato.telefone}}</td> <td>{{contato.Operadora.nome | lowercase}}</td> <td>{{contato.data | date: 'dd/MM/yyyy HH:MM'}}</td> </tr> </table> </body> </html>  
    • Por mruoppolo
      Olá, tudo bem?
       
      Eu criei este site aqui: https://www.wpmasterlab.com/ utilizando o bootstrap, mas na versão mobile o menu fica totalmente branco, sem os elementos não estou conseguindo resolver, você tem alguma ideia do que pode ser?
       
      Obrigado :D
    • Por luiz de oliveiro
      alguem pode me dizer qual a diferença de criar objetos desses dois tipos 
      var nome = new Object();           nome.primeiroNome = "primeiro nome";           nome.segundoNome = "segundo nome";           nome.sobreNome = "sobrenome";     document.write(nome.primeiroNome);     var numeroP = {         numero1 : "100",         numero2: "101"             }     document.write(numeroP.numero1);  
    • Por Yuri Freitas
      Estou desenvolvendo uma pagina em html, e usando JS. Criei 2 tabelas, onde pretendo colocar as questões de uma prova e compara com o gabarito retornando o total de pontos que o usuário fez.
      Mas, não estou conseguindo comparar as teclas radio:
      Por exemplo, o  usuário seleciona a letra a em uma tabela, e b em outra, isso deveria resultar em 0
      se ele escolher a em ambas isso deveria resultar em 1.
      Tentei fazer isso, mas não deu certo:
      <script> function teste(escolha){ var letra = escolha.value. for(i=0;i<document.zebra.letra.length;i++) if(document.zebra.letra.length.equals(document.zebraGabarito.letra.length)) alert("" + i) }</script>  
      não consegue sair disso