Forum Pplware
Jquety - mudar classes de LI - Versão de Impressão

+- Forum Pplware (http://forum.pplware.com)
+-- Fórum: Mais Tech (/forumdisplay.php?fid=11)
+--- Fórum: Programação e Web (/forumdisplay.php?fid=16)
+--- Tópico: Jquety - mudar classes de LI (/showthread.php?tid=10354)

Páginas: 1 2


Jquety - mudar classes de LI - Article0 - 19-12-2011 11:53

Boas

Estou a tentar mudar a class de uma LI quando carrego nela e simplesmente ja tentei algumas funções e nada, como por exemplo,

$(document).ready(function () {
$('li.li2').click(function () {

$('#link2').removeClass('sub').addClass('left');
ou
$('#link2').css('color, 'green');

});

});



Tentei estas basicas, pois nao tem nenhum filho e nenhum pai.

Podem me ajudar?

codigo da LI (é uma LI dentro doutra, como uma subLI):

<asp:Repeater ID="RepeaterSubMenu" runat="server" OnItemDataBound="RepeaterSubMenu_ItemDataBound">
<ItemTemplate>
<li class="li2"><a id="link2" runat="server" class="sub">
<asp:Literal ID="LiteralName" runat="server"></asp:Literal></a>
</ItemTemplate>
</asp:Repeater>

Css:

.sub:link{color: #514e4c;padding-left: 28px;padding-bottom: 5px;padding-top: 5px;float: left;}
.sub:visited{color: #514e4c;}
.sub:active{color: #514e4c;}
.sub:hover{color: #99CC00;margin-right: 0px;margin-left: 0px;}

.left:link{color: #99CC00;padding-left: 28px;padding-bottom: 5px;padding-top: 5px;float: left;}
.left:visited{color:#99CC00;}
.left:active{color: #99CC00;}
.left:hover{color: #99CC00;margin-right: 0px;margin-left: 0px;}


Como devem reparar, quero carregar no Link2 (respectivo ao LI2) e assim trocar de class.

Agradeço a quem me puderr ajudar

Cumprimentos,

Article0


RE: Jquety - mudar classes de LI - Bruno Bernardino - 19-12-2011 12:02

A menos que estejas a dar referências (id's, classes ou objectos) erradas, deveria funcionar.

Já experimentaste fazer um debug para confirmar se está a ser executado o código quando clicas? (tip: console.log())

A única forma que vejo para isso não funcionar é se estiveres a adicionar esses elementos depois do DOM já estar carregado (por exemplo, por javascript/ajax). Nesse caso, terás de usar o live('click') em vez do click().


RE: Jquety - mudar classes de LI - Article0 - 19-12-2011 12:11

Ja exprimentei fazer um debug e por o live('click') e tambem nada.

Se eu puser um alert(' ') o gajo ate me apresenta a caixa. A minha duvida é... Como as 3 Li vao mandar a uma pagina, será que faz a função quando carrego mas deixa de fazer efeito quando carrega a pagina onde a LI mandou? Pode ser isso.

Queria fazer algo como isto: http://www.java2s.com/Tutorial/JavaScript/0571__jQuery/Allliunderulbutnotaclassname.htm

Eu pensava que podia fazer desta maneira


RE: Jquety - mudar classes de LI - Bruno Bernardino - 19-12-2011 12:30

Desculpa lá, mas tens aí incoerências no que dizes que me leva a acreditar que não estás a fazer bem o debug.

De qualquer das formas, se o link vai para outro lado, o teu problema é obviamente esse. Tens de fazer um return false no evento de click do anchor, ou pelo menos um event.preventDefault();


RE: Jquety - mudar classes de LI - Article0 - 19-12-2011 12:32

Ja exprimentei fazer um debug e por o live('click') e tambem nada.

Se eu puser um alert(' ') o gajo ate me apresenta a caixa. A minha duvida é... Como as 3 Li vao mandar a uma pagina, será que faz a função quando carrego mas deixa de fazer efeito quando carrega a pagina onde a LI mandou? Pode ser isso.

Queria fazer algo como isto: http://www.java2s.com/Tutorial/JavaScript/0571__jQuery/Allliunderulbutnotaclassname.htm

Eu pensava que podia fazer desta maneira


RE: Jquety - mudar classes de LI - Berto - 19-12-2011 12:54

Boas,

Não sei se foi erro de copy paste, mas vejo para já um problema no repeater, falta fechar o li. Outra coisa que não tenho a certeza, é que ao fazer o <a runat="server"> se o id do lado do cliente não é gerado no server side.

Tens o firebug instalado?


RE: Jquety - mudar classes de LI - Article0 - 19-12-2011 13:09

Sim tenho o firebug instalado.

O fecho da LI foi culpa do paste, pois aqui ta fechado. Acho que nesse caso do id gerado, nao a problema pois ele ja executou varias funções que fiz.

O problema é mesmo do codigo. Com o firebug, fui por o codigo na consola e nada.

Faltou me por uma coisa:

<ul class="dl3">
<asp:Repeater ID="RepeaterSubMenu" runat="server" OnItemDataBound="RepeaterSubMenu_ItemDataBound">
<ItemTemplate>
<li class="li2"><a id="link2" runat="server" class="sub">
<asp:Literal ID="LiteralName" runat="server"></asp:Literal></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>


Esta é a estrutura do subLI.

tentei fazer isto:

$('#link2').removeClass('sub').addClass('left');

$('.dl3').removeClass('left');
$(this).parent().addClass('left');

$('#link2.dl3').removeClass('sub').addClass('left');


e nao da, ja testado no console do firebug. Ideias?


RE: Jquety - mudar classes de LI - Bruno Bernardino - 19-12-2011 13:15

mas os identificadores estão correctos? Ou seja, a referência para $('#link2') existe mesmo? (o que te retorna na consola um $('#link2').length ?) Isto sem links é muito complicado...


RE: Jquety - mudar classes de LI - Article0 - 19-12-2011 13:20

vou fazer o seguinte.

O site que estou a desenvovler é: http://wingerconsulting.spirituc.com/

O que estou a dizer é no menu do lado esquerdo onde nas actividades, soluções e produtos, quando carrego e vai para a pagina dele, o nome tem de ficar verde.

O resto ja tenho em cima


RE: Jquety - mudar classes de LI - Berto - 19-12-2011 16:39

Deixa ver se percebo o que queres:

Quando carregas num link e vais para a página, queres que o menu fique selecionado, i.e. quando estou em "Produtos", este fique com o estilo de selecionado, correcto? Se é esta a intenção e os pedidos são em post-back, pq não fazes isto no servidor? Ou seja, quando estás a escrever o menu (repeater), escreves no li (acho que é no li) o estilo a indicar que estás nessa area? É que ao fazer o click, tas a fazer um post-back e perdes todas a referencias para tudo o que tinhas nessa página.

Percebi mal?