Ir para conteúdo
    • João Batista Neto

      iMasters InterCon 2017   10-10-2017

      Ainda dá tempo de se inscrever no iMasters InterCon 2017, o maior evento dev do Brasil!  
Rafael Zilli

Mudar CSS por JAVASCRIPT

Recommended Posts

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.

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"});

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 zetabyte00
      Tem alguma diferença de desempenho entre linkar e exportar uma folha de estilo CSS?
       
       
       
       
    • Por PRWEB
      Boa tarde, tudo bem?
       
      Estou com um probleminha e gostaria muito de ajuda.
      Tenho um filtro que ao digitar a informação ele faz a busca e agora adicionei uma função que verifica que se quando estiver black_list = 1 é direcionado para uma pagina, caso estiver em branco é direcionado para outra pagina.
      Fiz assim, mas não está funcionando:
      function vai_serie(tipo,no_serie,contador,campo,ordem) { var tipo = document.getElementById('tipo').value; var no_serie = document.getElementById('no_serie').value; var contador = document.getElementById('contador').value; if( tipo == "" ){ if (confirm("DIGITE O CÓDIGO DO PRODUTO NO CAMPO TIPO!")) document.getElementById("tipo").value = ""; document.getElementById("tipo").submit(); return true; } if( no_serie == "" ){ if (confirm("DIGITE O Nº SÉRIE NO CAMPO SERIAL!")) document.getElementById("no_serie").value = ""; document.getElementById("no_serie").submit(); return true; } if( contador == "" ){ if (confirm("DIGITE O CONTADOR DO PRODUTO NO CAMPO CONTADOR!")) document.getElementById("contador").value = ""; document.getElementById("contador").submit(); return true; } //Montando a URL a ser enviada if( black_list == "1" ){ var url = "registros_black_list_rma.asp?tipo=" + tipo + "&no_serie=" + no_serie + "&contador=" + contador + "&campo=no_os&ordem=asc"; else var url = "teste.asp?tipo=" + tipo + "&no_serie=" + no_serie + "&contador=" + contador + "&campo=no_os&ordem=asc"; document.getElementById('historico').src = url; //enviando a pagina return false; } Por favor podem me ajudar?
       
      Muito Obrigado
    • Por fabiosc80
      Pessoal preciso de uma ajuda pois travei aqui.
       
      Tenho 3 dropdown com valores iguais (1,2 e 3).
      Tenho que selecionar um valor em um Dropdown e sumir dos outros.
      E quando Seleciono: Selecione um item (valor 0) tem que voltar para os outros dropdowns.
      Fiz assim:
       
      var varField_idFacilitador1 = $("#varField_idFacilitador1 option:selected").val(); if (varField_idFacilitador1 == 0){ $("#varField_idFacilitador1 option[value='1']").show(); $("#varField_idFacilitador2 option[value='1']").show(); $("#varField_idFacilitador3 option[value='1']").show(); } if (varField_idFacilitador1 == 1){ //$("#varField_idFacilitador1 option[value='1']").show(); $("#varField_idFacilitador2 option[value='1']").hide(); $("#varField_idFacilitador3 option[value='1']").hide(); } if(varField_idFacilitador1 == 2){ $("#varField_idFacilitador2 option[value='2']").hide(); $("#varField_idFacilitador3 option[value='2']").hide(); } if(varField_idFacilitador1 == 3){ //$("#varField_idFacilitador1 option[value='3']").show(); $("#varField_idFacilitador2 option[value='3']").hide(); $("#varField_idFacilitador3 option[value='3']").hide(); } var varField_idFacilitador2 = $("#varField_idFacilitador2 option:selected").val(); if (varField_idFacilitador2 == 0 && varField_idFacilitador3 == 0){ $("#varField_idFacilitador1 option[value='2']").show(); $("#varField_idFacilitador2 option[value='2']").show(); $("#varField_idFacilitador3 option[value='2']").show(); } if (varField_idFacilitador2 == 1){ //$("#varField_idFacilitador2 option[value='1']").show(); $("#varField_idFacilitador1 option[value='1']").hide(); $("#varField_idFacilitador3 option[value='1']").hide(); } if(varField_idFacilitador2 == 2){ //$("#varField_idFacilitador2 option[value='2']").show(); $("#varField_idFacilitador1 option[value='2']").hide(); $("#varField_idFacilitador3 option[value='2']").hide(); } if(varField_idFacilitador2 == 3){ //$("#varField_idFacilitador2 option[value='3']").show(); $("#varField_idFacilitador1 option[value='3']").hide(); $("#varField_idFacilitador3 option[value='3']").hide(); } var varField_idFacilitador3 = $("#varField_idFacilitador3 option:selected").val(); if (varField_idFacilitador1 == 0 && varField_idFacilitador2 == 0){ $("#varField_idFacilitador1 option[value='3']").show(); $("#varField_idFacilitador2 option[value='3']").show(); $("#varField_idFacilitador3 option[value='3']").show(); } if (varField_idFacilitador3 == 1){ //$("#varField_idFacilitador3 option[value='1']").show(); $("#varField_idFacilitador1 option[value='1']").hide(); $("#varField_idFacilitador2 option[value='1']").hide(); } if(varField_idFacilitador3 == 2){ //$("#varField_idFacilitador3 option[value='2']").show(); $("#varField_idFacilitador1 option[value='2']").hide(); $("#varField_idFacilitador2 option[value='2']").hide(); } if(varField_idFacilitador3 == 3){ //$("#varField_idFacilitador3 option[value='3']").show(); $("#varField_idFacilitador1 option[value='3']").hide(); $("#varField_idFacilitador2 option[value='3']").hide(); } Porem nao ta rolando certo.
      Volta pra um mas nao volta pra outro.
       
      Não sei mais oque fazer.
       
      Alguem poderia me ajudar?
       
       
       
    • Por matheuslimasr
      Olá pessoal vocês podem ver minha rede social https://codysocial.com/
       
      e mandar dicas e ate criticas isso vai mim ajuda muito para melhorar mais ainda ela,
      vou fica bastante agradecido se vocês testar meu projeto e mim dizer oque achou dela. 
       
      Iniciei este projeto em dezembro de 2016 , e pretendo continuar com ele sempre.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: