manter a aparência ao clicar no menu

[junaooaks 3]

pessoal tenho um menu que gostaria que quando clicado ele muda a cor e mantenha com esta cor ate clicar em outro, serve para identificar onde o usuário esta.

 

ja tentei o a:visited, nao funcionou

 

menu css

img {
    border: none;
}

#tabs1 {
    float:left;
    width:100%;
    background:#F4F7FB;
    font-size:93%;
    line-height:normal;
    border-bottom:1px solid #BCD2E6;
}
#tabs1 ul {
    margin:0;
    padding:0px 10px 0 10px;
    list-style:none;
}
#tabs1 li {
    display:inline;
    margin:0;
    padding:0;
}
#tabs1 a {
    float:left;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
}
#tabs1 a span {
    float:left;
    display:block;
    padding:5px 15px 4px 6px;
    color:#627EB7;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs1 a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
    color:#627EB7;
}
#tabs1  a:visited{
    color:#FFF;
}
#tabs1 a:hover {
    background-position:0% -42px;
}
#tabs1 a:hover span {
    background-position:100% -42px;
}

#tabs1 li a:active span{
    color:#627EB7;
}

#tabs1 a:active {
    background-position:0% -42px;
}

#tabs1 a:active span {
    background-position:100% -42px;
}

#tabs1 a:visited span {
    color:#FFFFFF;
}

MENU HTML

<div id="tabs1">
                <ul>
                    <li><a href="#"><span>CADASTRO</span></a></li>
                    <li><a href="#"><span>LANÇAMENTO</span></a></li>
                    <li><a href="#"><span>RELATÓRIO</span></a></li>
                </ul>
            </div>

 

[William Bruno 1501]

leia:

 

http://www.maujor.com/blog/2009/08/12/destacar-link-para-pagina-corrente/

[junaooaks 3]

bruno tentei aqui este menu do major, esqueci de comentar que este menu meu não faz refresh na tela. o do major pega o id da pagina porque carrega de novo.

[Web_avallon 5]

É possível fazer isso com jQuery e CSS. Primeiramente você precisa adicionar uma classe à li que você quer que fique com aquelas propriedades quando o visitante entrar na sua page, no seu caso, creio que seja cadastro. Ficaria assim:

 

 

 

<ul> <li><a class="atual" href="#"><span>CADASTRO</span></a></li><li><a href="#"><span>LANÇAMENTO</span></a></li> <li><a href="#"><span>RELATÓRIO</span></a></li> </ul>

 

Em seguida, você define no seu CSS quais as propriedades que o link que está clicado assumirá. Deixe sua imaginação rolar. Você pode fazer o que quiser. Eu sugiro que você utiliza a propriedade transition do CSS3 para dar uma suavidade na passagem de propriedade. Por exemplo (vai ser apenas um exemplo, utiliza as propriedades que quiser!)

 

.atual { background: rgba(0,0,0,.8);

color: #fff;

border-radius:10px 10px 0 0;

margin-top:6px;

-moz-transition: all 0.3s;

-webkit-transition: all 0.3s;

-o-transition: all 0.3s;

-ms-transition: all 0.3s;}

 

Em seguida, o código jQuery que faz toda a mágica!

 

 

<script>
$('ul li a').click(function(){
$('ul li a').removeClass('atual');
$(this).addClass('atual');
});
</script>

 

Esse código é bem simples como pode ver. Quando você clica no link que está dentro da li, que por sua vez está dentro da ul, ele primeiramente remove a class "atual" e em seguida adiciona a class "atual". Então ele faz essa variação de class.

[Jonathan Cutrim Lacerda 3]

Jquery Básico

$(document).ready(function() {
    $('li').click(function(){
        
        $('li').each(function(index) {
            $(this).removeClass('CLASSE COM FUNDO DA SUA ESCOLHA'); 
        });
        $(this).addClass('CLASSE COM FUNDO DA SUA ESCOLHA');      
    })
});

Abçs