Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Luiz Sousa

Mudar estilo do <li> quando selecionado

Recommended Posts

Possou uma pagina html onde tenho uma paginação por div. Na lateral da tela tenho um menu onde indica um macro assunto de cada pagina. Gostaria de mudar o estilo de cada topico conforme mudo a pagina.

 

anexo tem imagem da tela 

Capturar.PNG

Compartilhar este post


Link para o post
Compartilhar em outros sites

E se cada página que você carregar mudar o estilo, ou seja, nas páginas terão uma tag "<style>" que vai sobreescrever o estilo corrente

Compartilhar este post


Link para o post
Compartilhar em outros sites

HTML

<ul>
    <li onclick="funcao(this);">CLICK?</li>
</ul>

 

Javascript

function funcao(parametro) {
    parametro.style.background = "red";
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por FabianoSouza
      Galera, por padrão, cada LI que se cria (via jscript), vai parar na parte inferior da UL, né?
      Há uma maneira de fazer a LI criada pela minha function ir para o topo da lista dentro da UL?
       
       
    • Por Boca
      Pessoas estou com uma duvida preciso de ajuda
      Tenho alguns campos chamados "horario_0, horario_1, horario_2, horario_3, horario_4, horario_5, horario_6 no meu banco de dados
      estou precisando que ela seja dinâmica dentro de um for
      exemplo:
       
      <?php for ($dia = 0; $dia < 7; $dia++): $resultadoBD->horario_$dia endfor; ?>  
    • Por s3c0
      Olá pessoal,
       
      boa tarde. Tem alguma forma da DIV pai acompanhar a altura da ul filho?
       
      <div class="navPages-container" > <div class="container"> <nav class="navPages" style="text-align:left;"> <ul class="navPages-list"> <li class="navPages-item" style="z-index:3; width:122px;" onmouseover="mostra_fundo();" onmouseout="esconde_fundo();"><a class="navPages-action has-subMenu" href=""><i class="fa fa-list"></i> Categorias</a> <div id="menu2"> <ul class="parent-menu"> <li onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'"><a href="#1">Home & Kitchen</a> <div class="categoria"> <ul> <li><a href="#11">item1</a></li> <li><a href="#12" onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'">item2</a></li> <li><a href="#13"><i class="fa fa-list"></i> <span>Item 1</span> <i class="fas fa-angle-right" style="float:right; margin-right:10px;line-height:35px;"></i></a> <div class="subcategoria"> <ul > <li><a href="#111">item</a></li> <li><a href="#112">Even more</a></li> <li><a href="#113">item</a></li> <li><a href="#114">item</a></li> <li><a href="#115">item</a></li> </ul> </div> </li> <li><a href="#14">item4</a></li> <li><a href="#15">item5</a></li> <li><a href="#16">item6</a></li> </ul> </div> </li> #menu2{position:absolute;z-index:3;margin-top:16px; width:1170px; margin-left:-19px;background:#fff;box-shadow:0 1px 10px rgba(0,0,0,.1);border:1px solid #d0d0d0;border-radius:0 0 3px 3px; min-height:300px;display:none;font-size:14px;font-weight: bold;} .parent-menu{list-style-type:none;padding:15px 0px;width:270px;float:left;margin-top:0;position:absolute;line-height:35px;} .parent-menu li:hover{background:#ccc;cursor:pointer;} .categoria{display:none;width:270px;left:255px;line-height:35px;list-style-type:none;position: absolute;top: 15px;a {line-height: 35px;}} .categoria ul li:hover{background:#ccc;cursor:pointer;} .categoria ul{list-style-type:none;width:270px;} .categoria ul li{list-style-type:none;width:270px;} .subcategoria{display:none;width:270px;left:270px;line-height:35px;list-style-type:none;position: absolute;top: 0px;a {line-height: 35px;}} .subcategoria ul{list-style-type:none;width:270px;} .subcategoria ul li{list-style-type:none;width:270px;} .subcategoria ul li:hover{background:#ccc;cursor:pointer;} .navPages-item:hover #menu2{display:block;} .parent-menu li:hover .categoria{display:block;} .categoria ul li:hover .subcategoria{display:block;} #menu2 ul a { margin: 0px; display: block; width: 100%; height: 100%; } #menu2 ul li a { margin: 0px; display: block; width: 100%; height: 100%; }  

    • Por FabianoSouza
      Tenho essa lista
       
      <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
      Preciso que ele fique assim:
      1    2
      3    4
      5
       
      Como faço um CSS para isso?
       
      Obrigado.
×

Informação importante

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