Alterna il colore di sfondo tra due collegamenti per mostrare che è attiva utilizzando jQuery e CSS?

Question

(Jquery) Ho due div che sto girevoli avanti e indietro (mostrare e nascondere) fra la mia pagina con un link per ogni. Voglio che il link che viene cliccato per passare a un colore di sfondo evidenziato e quando si fa clic dall'altro viene evidenziato e il precedente torna alla normalità.

Ho provato rielaborare il codice a ginocchiera che ho per il div per applicarlo al css sui link ma non riesco a capirlo.

Se qualcuno ha un'idea, sarei grato. Grazie.

Answer 1

<a href="link1" class="theLinkClass" id="currentLink">Link 1</a>
<a href="link2" class="theLinkClass">Link 2</a>

Poi, nel tuo css

#currentLink {
    background-color: #FFCCCC;
}

Allora il tuo jQuery

$(document).ready(function(){

    $('.theLinkClass').click(function(){

        $('.theLinkClass').attr('id','');
        $(this).attr('id','currentLink');

    });

});

Se avete i vostri collegamenti in un div con una classe o id il codice jQuery può essere abbreviato.

Diciamo che ....

<div class="myLinks">
    <a href="link1" class="currentLink">Link 1</a>
    <a href="link2">Link 2</a>
</div>

CSS

.currentLink{
    background-color: #FF0000;
}

jQuery

$(document).ready(function(){

    $('.mylinks a').click(function(){

        $('.mylinks a').removeClass('currentLink').filter(this).addClass('currentLink');

    });

});

Il secondo dei due esempi sfrutta la capacità concatenamento di jQuery. Spero che questo aiuta!

Answer 2

Si desidera il codice che seleziona sia, e si applica la classe ad uno solo di quello selezionato.

$('div.togglers').click(function() {
    $('div.togglers').removeClass('selected').filter(this).addClass('selected');
});

Dopo di che, basta due regole CSS separati.

div.togglers {
  background-color: white;
}
div.togglers.selected {
  background-color: red;
}

Answer 3

Impostare CSS per fare l'evidenziazione e la commutazione per voi:

.First .ShowFirst { border: 1px solid #000; }
.First .SecondContent { display: none; }
.Second .ShowSecond { border: 1px solid #000; }
.Second .FirstContent { display: none; }

Javascript per associare eventi click che cambiano il nome della classe del genitore:

$(function() {
  $('.ShowFirst').Click(function(){
    $('#Parent').attr('className', 'First');
    return false;
  });
  $('.ShowSecond').Click(function(){
    $('#Parent').attr('className', 'Second');
    return false;
  });
});

Il nome della classe del genitore decide quale collegamento è evidenziato e che il contenuto viene visualizzato. Ecco il primo contenuto viene mostrato dall'inizio:

<div id="Parent" class="First">
  <a class="ShowFirst" href="#">Show first</a>
  <a class="ShowSecond" href="#">Show second</a>
  <div class="FirstContent">1</div>
  <div class="SecondContent">2</div>
</div>

(Come bonus non mostrerà sia il contenuto durante il caricamento e nascondere uno quando il carico è fatto. Solo uno dei div contenuti sono visibili dall'inizio.)