È possibile impostare uno stile di collegamento che mostra solo quando viene visualizzata la pagina Web collegata?

StackOverflow https://stackoverflow.com/questions/195578

  •  10-07-2019
  •  | 
  •  

Domanda

Ho avuto un problema come questo (questo è il menu HTML / CSS):

Eshop | Un altro eshop | Un altro eshop

Il cliente vuole che funzioni così:

L'utente accede al sito Web, fa clic su Eshop. Eshop diventa di colore rosso con il riquadro rosso. L'utente decide di visitare un altro eshop, quindi Eshop tornerà al colore normale senza il contorno del riquadro rosso e un altro eshop eseguirà nuovamente il trucco del contorno rosso ..

So che c'è A: visitato ma non voglio che tutti i collegamenti ai menu visitati siano rossi con il riquadro rosso.

Grazie per qualsiasi aiuto :)

È stato utile?

Soluzione

Lo stesso che ha scritto Joe Skora ma più specifico: 

.red {
    outline-color:red;
    outline-width:10px;
}

Ora puoi usare Javascript (in questo esempio usando jQuery ) nel gestore dell'evento click: 

$('.red').removeClass('red'); // removes class red from all items with class red
$(this).addClass('red'); // adds class red to the clicked item

Un altro modo di farlo è l'uso dello pseudo-selettore: target.
Per informazioni al riguardo: www.thinkvitamin.com

Altri suggerimenti

Puoi farlo con CSS e HTML semplici. Un metodo che usiamo comunemente è quello di avere un ID corrispondente e un selettore di classe per ciascun elemento di navigazione.

Il vantaggio è che non è necessario modificare il codice menu per pagina, modificare la pagina stessa , cosa che già si farà a meno che tutto è completamente dinamico.

Funziona così: 

<!-- ... head, etc ... -->
<body>

<ul class="nav">
    <li><a href="home.html" class="nav-home">Home</a></li>
    <li><a href="art.html" class="nav-art">Art</a></li>
    <li><a href="contact.html" class="nav-contact">Contact</a></li>
</ul>

<!-- ... more page ... -->

</body>

Quindi hai impostato alcuni CSS in questo modo: 

#NAV-HOME .nav-home,
#NAV-ART .nav-art,
#NAV-CONTACT .nav-contact { color:red; }

Per modificare il " corrente " voce di menu, puoi semplicemente assegnare l'ID corrispondente a un elemento più in alto nella struttura del documento. In genere lo aggiungo a & Lt; body & Gt; tag.

Per evidenziare il " Art " pagina, tutto ciò che devi fare è questo: 

<!-- The "Art" item will stand out. -->
<body id="NAV-ART">

<ul class="nav">
    <li><a href="home.html" class="nav-home">Home</a></li>
    <li><a href="art.html" class="nav-art">Art</a></li>
    <li><a href="contact.html" class="nav-contact">Contact</a></li>
</ul>

<!-- ... more page ... -->

</body>

Puoi farlo con le classi CSS. Ad esempio, una classe selezionata potrebbe identificare il negozio attuale, cambiando colore e contorno. Quindi è possibile modificare la selezione aggiungendo / rimuovendo la classe dalla voce di menu.

Dai un'occhiata qui , illustra un tutorial sulla creazione di menu CSS .

Fondamentalmente, non può essere fatto solo con CSS, alcuni script dovrebbero aver luogo (lato server o client, preferibilmente server). Come hanno suggerito gli altri, aggiungi una classe "selezionata" (o qualcosa di simile) al collegamento attivo e definisci gli stili per esso nel CSS.

Ad esempio, i collegamenti: 

 <a href="#">Eshop</a> | <a href="#" class="selected">Another eshop</a> | <a href="#">Another eshop</a>

Gli stili: 

.selected {
     font-weight:bold;
     color:#efefef;
}

I collegamenti verrebbero generati dinamicamente, usando ad esempio PHP: 

 <?php
 foreach(array('eshop' => '#','another eshop' => '#','yet another eshop' => '#') as $title => $url) {
      echo '<a href="' . $url . '"' 
           . ($url == $_SERVER['REQUEST_URI'] ? ' class="selected"' : null) 
           . '>' . $title . '</a>'; 
 }

Se ti stai trasferendo in una nuova pagina nella stessa finestra del browser, Zack Mulgrew e Bobby Jack entrambi hanno risposte eccellenti.

Se stai aprendo il link eshop in una nuova finestra, non c'è molto che puoi fare con css da solo e gs ha una risposta ragionevole fatta eccezione per la scelta del nome della classe di ( rossa ).

Che cos'è?

Per quanto ne so, puoi farlo solo generando un codice diverso per ogni pagina (impostando una classe diversa per la pagina corrente) o usando JavaScript per cambiare il menu dopo il caricamento della pagina.

puoi usare e attribuire il selettore in questo modo ... 

a[href^="http:\\www.EShop"]:visted { color: red; }

In questo modo stai dicendo che qualsiasi link che ha un href che inizia con http: \ Eshop.com ed è stato visitato applica questo stile.

Dipende da come sono costruite le tue pagine, ma il CSS classico era fare questo con un ID sul corpo, così come ogni collegamento di navigazione, quindi potresti avere qualcosa del tipo:

eshop.html 

<body id="eshop">
  <ul>
    <li><a href="" id="link-eshop">Eshop</a></li>
    <li><a href="" id="link-aeshop">Another eshop</a></li>
    <li><a href="" id="link-eshop-three">Another eshop</a></li>
  </ul>
</body>

e CSS corrispondente: 

#eshop #link-eshop, #aeshop, #link-aeshop, #eshop-three #link-eshop-three
{
    color: red;
    outline: 1px solid red;
}

la navigazione è coerente; solo l'id sul corpo cambia da pagina a pagina.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top