Publicidade

Rafael Zilli

Mudar CSS por JAVASCRIPT

Patrocínio:

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 malukovynsk
      o botao de copiar, cancelar e recortar eu consegui, mas o de colar nao, alguem pode me ajudar? é pra ser colado o conteúdo em uma caixa de formulário.
    • Por keven1406
      Minha duvida é se a semântica está legal, e se fiz certo na segunda section do miolo do site. A section que me refiro é a com a class = "section-contato". Lá tem o endereço da empresa, o numero e email. Como no design não pode ter isso: Endereço: Tralálálálá, e sim uma imagem e do lado da imagem o endereço. A mesma coisa com o e-mail e o telefone. Vou mandar a photo do design que estou estudando e também o código. Em questão da imagem e design já está tudo certo. Meu problema só é se fiz certo semanticamente ao colocar no <li> o <h3>Address</h3> e depois o paragrafo com o conteúdo para indicar que aquele parágrafo refere-se ao endereço e assim por diante. Vou colocar só o HTML já que não estou precisando de ajuda com o CSS.
       
      <!DOCTYPE html> <html lang = "pt-br"> <head> <title>Contact Us</title> <meta charset = "UTF-8"/> <link rel = "stylesheet" href = "_css/reset.css"/> <link rel = "stylesheet" href = "_css/estilo.css"/> </head> <body> <header> <h1>Don't be a stranger ;)</h1> </header> <div class = "container tamanho"> <section class = ""> <section class = "secao-form"> <h2>Input your datas</h2> <form action = "/action"> <div class = "container tamanho-form"> <p><label for = "cNome">Name: </label><input type = "text" name = "tName" id = "cNome" size = "39" maxlength = "50" placeholder = "Name"/></p> <p><label for = "cMail">E-mail: </label><input type = "email" id = "cMail" size = "39" maxlength = "30" placeholder = "Email"/> <p><label for = "cPhone">Phone: </label><input type = "text" name = "Phone" id = "cPhone" size = "39" maxlength = "25" placeholder = "Phone"/> <textarea name = "menssagem" rows = "9" cols = "57" placeholder = "Message" id = "text-area"></textarea> <input type = "submit" value = "Submit >"/> <div> </form> </section> <section class = "secao-contato"> <div class = "container tamanho-contato"> <h2>Ask Us Anything</h2> <ul id = "localizacao"> <li class = "endereco"> <h3>Address</h3> <p>350 7th Ave, New York, <br/> <span id = "linha-endereco">NY 760890, USA</span></p> </li> <li class = "email"> <h3>E-mail</h3> <p>Support@halocity.com</p> </li> <li class = "telefone"> <h3>Phone</h3> <p>+1 (212) 643-4534</p> </li> </ul> <footer> <ul class = "social"> <li><a href = "linkedin.com">LinkdIn</a></li> <li><a href = "facebook.com">Facebook</a></li> <li><a href = "twitter.com">Twitter</a></li> </ul> </footer> </div> </section> </section> </div> </body> </html> Imagem do design que estou estudando:  https://drive.google.com/file/d/0Byt538E2KsCbME5haTJlNERyYzQ/view?usp=sharing
       
      Uma pergunta adicional:
      Notei que a página não tem um footer comum. Daí tive a ideia de colocar um footer no fim da segunda section onde tem as redes sociais. Isso semanticamente está correto ou é melhor deixar a página sem footer algum?
       
      Obs: Não criei essa o design, peguei no dribble para treinar o css e html.
       
      Desde já agradeço a todos!
    • Por WEBCHARLES
      Boa tarde,
       
      tenho o seguinte codigo:
      $qnr .= '<input type="button" id ="quest" value="'.$questn->Ordem.'" onClick="window.location.reload()">'; gostaria de que, quando clicar neste botão carregar a seguinte session com o botão correspondenre
       
      $this->session->set_userdata('numQuest', $questn->Ordem); exemplo: $qnr = 1,2,3,4,5,6... se clicar no botoão de numero 3, irá carregar a pagina com a session acima e a variável $questn->Ordem será o numero clicado, neste caso o 3, ficando da seguinte forma:
       
      $this->session->set_userdata('numQuest', 3);  
       
      A dificuldade está em fazer carregar com o numero clicado. Quem puder ajudar, agradeço.
       
    • Por ViniciusPuttiMorais
      Eu estou desenvolvendo um jogo de cartas utilizando o elemento canvas do HTML5 e estou percebendo um atraso de varios segundos na reproducao do audio. Como eu poderia resolver isso?
       
      card.js
      game.js
      message.js
      script.js
    • Por AndersonWS
      Não sei muito de JavaScript, creio que seja simples mas não estou conseguindo resolver.
       
      Precisava de uma função Accordion que ao clicar no próximo item, fechasse as informações do anterior e assim por diante.
      Usei o Accordion Bootstrap e funciona como eu queria, porém fico com um problema.
      Quando clico no botão para abrir as informações ele abre a informação mas o "sinal" de "mais" não muda pra "menos" usando essa função:
      $("a").click(function() { $("div").removeClass('in'); if ("div".style.display !== "active") { $("div").addClass('active'); } else { $("div").removeClass('active'); } }); Se eu uso outra, ele muda o sinal porém ai as informações do outro item não fecham e ficam todos abertos (o que eu não quero):
      var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ this.classList.toggle("active"); var collapse = this.nextElementSibling; if (collapse.style.display === "block") { collapse.style.display = "none"; } else { collapse.style.display = "block"; } } }  
      Meu HTML:
      <style> a.accordion { background: url(../img/pattern-1.png) repeat scroll 0 0 #eee; color: #444; cursor: pointer; padding: 18px; width: 96.5%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; margin-bottom:5px; } a.accordion.active, a.accordion:hover { background: #f3f3f3; } a.accordion.active::after { content: "\2212"; } a.accordion::after { content: '\002B'; font-size: 13px; color: #777; font-weight: bold; float: right; margin-left: 5px; } *, *::before, *::after { box-sizing: inherit; } .collapse { display: none; } .collapse.in { display: block; } tr.collapse.in { display: table-row; } tbody.collapse.in { display: table-row-group; } .collapsing { position: relative; height: 0; overflow: hidden; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: .35s; -o-transition-duration: .35s; transition-duration: .35s; -webkit-transition-property: height, visibility; -o-transition-property: height, visibility; transition-property: height, visibility; } </style> <section style="margin:0 auto;width:100%;display:inline-table;"> <a class="btn btn-block accordion" role="button" data-toggle="collapse" data-target="#BR-Ass" aria-controls="gestao"> Todos os Estados </a> <div class="collapse" id="BR-Ass" style="margin:0 auto; width:96.5%;"> informações Todos os Estados </div> <a class="btn btn-block accordion" role="button" data-toggle="collapse" data-target="#SP-Ass" aria-controls="gestao"> São Paulo </a> <div class="collapse" id="BR-Ass" style="margin:0 auto; width:96.5%;"> informações São Paulo </div> ... </section> Como faço o "sinal" mudar de mais para menos no javascript?