2

Eu tenho um código em javascript, visivel neste link http://jsfiddle.net/9nd4j/1272/

Estou a tentar colocar os 3 primeiros links activos em simultaneo, se alguem clicar no "About MHG" ou "Workout Programs" ou "Fitness Tips", ou seja, clicar em 1 dos 3, ambos ficam activo.

Os restante, estão correctos, mas os 3 primeiros pretendia que ficassem activos em simultaneo. é possivel?

    <ul class="navi">
        <li><a class="menu2" href="#">About MHG</a></li>
        <li><a class="menu3" href="#">Workout Programs</a></li>
        <li><a class="menu4" href="#">Fitness Tips</a></li>
        <li><a class="menu5" href="#">Contact Us</a></li>          
        <li><a class="menu6" href="#">Read Our Blog</a></li>
      </ul>


$('ul.navi').each(function(){
        // For each set of tabs, we want to keep track of
        // which tab is active and it's associated content
        var $active, $content, $links = $(this).find('a');

        // If the location.hash matches one of the links, use that as the active tab.
        // If no match is found, use the first link as the initial active tab.
        $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
        $active.addClass('active');
        $content = $($active.attr('href'));

        // Hide the remaining content
        $links.not($active).each(function () {
            $($(this).attr('href')).hide();
        });

        // Bind the click event handler

        $(this).on('click', 'a', function(e){
            // Make the old tab inactive.
            $active.removeClass('active');
            $content.hide();

            // Update the variables with the new link and content
            $active = $(this);
            $content = $($(this).attr('href'));


            // Make the tab active.
            $active.addClass('active');

            $content.show();

            // Prevent the anchor's default click action
            e.preventDefault();
        });



    });
2

1 Resposta 1

2

Dentro deste event handler: $(this).on('click', 'a', function(e){ pode fazer uma busca para saber qual o index desta ancora (na verdade do li pai).

Se souber isso pode saber se é um dessas 3 primeiras ancoras que recebeu o click. Este passo pode ser feito com:

if ($(this).closest('li').index() < 3) // fazer o que procura

Quando esta condição se verificar precisa de percorrer esses elementos e dar-lhes a classe que quer. Sugestão, para usar quando a condiçõ em cima fôr verdade:

$(this).closest('ul').find('li a').each(function(i){
      if (i<3)$(this).addClass('active');
});

Os passos que este codigo dá são: parte da ancora clicada > sobe ao antecessor ul > procura as ancoras descendentes de elementos li > percorre uma a uma > atribui a classe às ancoras cujo index da seleção feita é inferior a 3. Ora como no javascript as arrays começam com index zero, a classe é adicionada aos indexs 0, 1 e 2.

Para adaptar o seu jsFiddle mudei $active.removeClass('active'); para $links.removeClass('active'); pois assim tira a classe de todos os links e não só do ultimo clicado.

Exemplo: http://jsfiddle.net/9nd4j/1282/

Links sobre alguns métodos usados:

  • index() - retorna o index relativo aos elementos da coleção
  • closest() - retorna o primeiro ancestral que faz match com o seletor
  • find() - retorna os elementos descendentes que fazem match com o seletor
  • each() - percorre todos os elementos da coleção passando o index como primeiro argumento
8
  • 1
    Obrigado Sergio, tal como indicado ajudaste me a resolver o problema! Commented 5/08/2014 às 10:24
  • Apenas uma duvida adicional, ja consegui fazer com que ao entrar na pagina tambem se matenha activo os 3 primeiros. Mas pretendia mostrar o conteudo associado (que so funciona ao clicar sobre eles com o href="#tab58") é possivel mostrar mal entrar na pagina? Commented 5/08/2014 às 10:44
  • @user3644929, pode fazer assim antes do event handler: $links.closest('ul').find('li a').each(function(i){ if (i<3)$(this).addClass('active');}); mas começo a achar que o seu código podia ser melhorado (simplificado) para isto: jsfiddle.net/A888R e aí só precisa ter no HTML a classe nas três primeiras ancoras.
    – Sergio
    Commented 5/08/2014 às 11:02
  • DEMO: jsfiddle.net/9nd4j/1284 A ideia é adicionar texto, isto será para implementar a legenda de um mapa, que ao entrar na pagina, ficará logo activo as 3 primeiras, com texto igual Commented 5/08/2014 às 11:06
  • 1
    funcionou! 5* Muito Obrigado! E desculpe o trabalho dado Commented 5/08/2014 às 11:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .