Dúvida com C:if ou c:url ou ...?

Front-end
#1

Bom dia pessoal. estou com dificuldades em acertar uma nemu aqui…

é o seguinte, em minha pagina dividi em partes header, pageContent e footer, para facilitar o desenvolvimento e nao ficar repetindo o codigo… até ai blz.

o problema é que tenho um menu no header, e quando estou em uma determinada pagina esse item fica sublinhado, o problema e que quando troco de pagina sempre o mesmo fica sublinhado, por eu nao ter como mudar a class = “current_page_item”,

gostaria de saber como posso fazer isso dinamicamente, com C:if ou c:url… nao sei o certo tentei alguns aqui mas obtive sucesso…

<ul class="group" id="example-one">
		
            <li class="current_page_item"><a href="index.jsp">Home</a></li>
            <li><a href="empresa.jsp">Empresa</a></li>
            <li><a href="servicos.jsp">Serviços</a></li>
            <li><a href="contato.jsp">Contato</a></li>
        </ul>

desde já agradeço.

#2

Imagino que deve ser realmente muito dificil acertar o NEMU, pois é um peixe bem ligeirinho…rsrsrs…

Brincadeiras a parte…

a tag c:if é uma tag condicional, serve apenas para incluir uma condição para que o código dentro dela seja renderizado ou executado se tal condição for satisfeita… não sei se isso ajudaria com o seu problema…

Você poderia explicar melhor o que está acontecendo pois não consegui entender direito…

O seu menu está aparecendo sublinhado ou os subitens do seu menu está aparecendo sublinhado? São todos os subitens ou só alguns?

#3

Exemplo:

HOME EMPRESA SERVIÇOS CONTATO

Home está como - current_page_item
gostaria de quanto mudar para empresa o sublinhado mudasse dinamicamente para empresa

HOME EMPRESA SERVIÇOS CONTATO

quando se tem o menu em todas as paginas isso é simples e manual, basta mudar o current_page_item, mais como esta apenas no header, tenho que mudar dinamicamente…

#4

Fala well,

No arquivo que chama a sua jsp set o valor true em uma variavel e coloque um teste nas classes da jsp, ficaria assim:

arquivo antes da jsp


...[EXECUÇÃO DOS COMANDOS]...

request.setAttribute("[NOME_DO_MENU]","true");



return "pagina.jsp"

e na jsp seu menu ficará assim:

[code]

         <li class='${Home== true ? "current_page_item" : " " }'>
               <a href="index.jsp">Home</a>
         </li>  
         
         <li class='${Empresa== true ? "current_page_item" : " " }'>
               <a href="empresa.jsp">Empresa</a>
         </li>  
        
         <li class='${Servicos== true ? "current_page_item" : " " }'>
               <a href="servicos.jsp">Serviços</a>
         </li>  
         
         <li class='${Contato== true ? "current_page_item" : " " }'>
               <a href="contato.jsp">Contato</a>
         </li>
[/code]

bem… acho que isso resolve seu problema.

Qualquer coisa posta ai.

#5

nao entendi essa primeira parte.

onde eu coloco [code]request.setAttribute("[NOME_DO_MENU]",“true”);

return “pagina.jsp” [/code]

nas JSPs onde esta o conteudo da pagina correspondente ao item do menu. <% request.setAttribute("[home]","true"); return "index.jsp %>

pois coloquei nas jsps mas o return nao aceita…

se puder me ajudar… pois nao estou intendendo direito…

obrigado…

#6

well

esse codigo não vai na jsp.

ele deve ser colocado no arquivo que chama sua jsp.

conseguiu entender?

#7

Ainda nao entendi… que arquivo q é esse q chama a jsp???

#8

Bomm

quando vc faz uma requisição ela é enviada a um controller que direciona a requisição para uma command(model) que retorna ao controller e direciona o resultado para a view(sua jsp).

ou seja, e na classe/command/action/servlet que usa as classes HttpServletRequest e HttpServletResponse em algum metodo que vc vai setar o paramentro na request pra usar na JSP, por meio da EL.
deu pra entender?

#9

agora sim. mais eu nao tenho um controlher, nao se trata de uma aplicacao, e sim de um simples site… uso jsp simplismente para estar dividindo a pagina em pedaços, nao tenho modelo, nem se quer um controler, como no Vraptor. apenas jsp com codigo html dentro. compreende? por isso quero mudar a dinamica do menu…

#10

Faz o menu e faz a alteração da class “current_page_item” com o JQuery.

#11

teria um exemplo para me mostrar Kcoelho…?

Obrigado

#12

da uma olhada nesse link e vê se te ajuda.

http://forum.imasters.com.br/index.php?/topic/394807-itens-lista-ul-add-e-remover-classes-jquery/page__p__1541867#entry1541867

#13

Well a dica do kcoelho é mto fera eu preparei um exemplo pra vc.

vc vai criar uma pasta e tres arquivos

nome do arquivo 1: index.html
nome do arquivo 2: css.css
nome do arquivo 3: funcoes.js

segue o codigo de cada arquivo:

arquivo 1: index.html


<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<script src="funcoes.js" type="text/javascript"></script>
</head>
<body>

<div id="menu">
<h4>MENU</h4>
<ul>
<li class="menu"><a href="#">HOME</a></li> 
<li class="menu"><a href="#">EMPRESA</a></li> 
<li class="menu"><a href="#">EMPRESA</a></li> 
<li class="menu"><a href="#">SERVICO</a></li> 
<li class="menu"><a href="#">CONTATO</a></li> 
</ul>
</div>

</body>

</html>

codigo do arquivo 2: css.css


@charset "utf-8";
/* CSS Document */

body{

font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

.ativo{
color:  #FF0000;
font-weight:bold; 
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
background:#ffc;
}

a:link {color: black; font-weight:bold; }
a:visited {text-decoration: none}
a:hover {text-decoration: underline; 
color: #FF0000;
}
a:active {text-decoration: none}

codigo do arquivo 3: funcoes.js


$(document).ready(function(){ 

 $('.menu').click(function(){
      
	  $('.menu').removeClass('ativo');
      $(this).addClass('ativo');
	  
});

 	 
});

acredito que isso deva resolver seu problema.

agora é só colocar os arquivos dentro do mesmo diretório e abrir o index. Divirta-se

e olha essa função de js ficou muito boa.

e claro lembrando o autor da idea que foi o William Bruno(do Imasters). afinal creditos são creditos.

e se isso resolver lembre-se de alterar o titulo do post. flws

#14

Vou fazer isso essa semana. tive uns imprevistos e nao deu mais para voltar a fazer o site. assim q eu fizer eu mudo o titulo do post para resolvido… grande abraço e obrigado pela ajuda…

#15

Sem dúvida a ajuda de vcs foi excelente, a dica do Kcoelho e seu exemplo jhonatan foram excelentes, funciona perfeitamente so no html normal… no meu caso nao funcionou… quando clico para a pagina desejada, a pagina faz reload e fica na mesma…

pow usando essa forma de dividir a pagina com header.jspf e footer.jspf facilita muitas coisas mas atrapalha em outras… vlw pessoal…

#16