Evidenziando pannello attivo in CSS senza JavaScript

Question

Sto costruendo qualcosa di simile a questa - http: //www.impressivewebs.com/demo-files/content-switcher/content-switcher.html

Mi chiedevo se qualcuno avesse qualche idea su come posso visualizzare il pannello di corrente nella navigazione senza l'uso di JavaScript - CSS puro

.

Sono abbastanza confidente non è possibile, ma ho pensato di chiedere in ogni caso.

Giusto per chiarire ...
Si noterà che quando si fa clic su un link in questa pagina - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html il link che hai appena cliccato sul salienti per informare l'utente che pannello che stanno guardando. Questo è quello che voglio fare in CSS.

Answer 1

E 'possibile, che ci crediate o no, è solo davvero difficile. Questo dovrebbe iniziare: http: / /thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ Il bit della chiave viene catturato in questa citazione:

  

Sono sicuro che siete tutti consapevoli di collegare ad un elemento sulla stessa pagina con l'uso dell'attributo ID e come funziona. Tuttavia, non si può avere saputo che il collegamento a un elemento che è nascosto fuori dalla pagina fa sì che l'elemento da "tirato" in vista in contrapposizione alla finestra salto verso il basso per quell'elemento.

Quindi, in pratica, si sarebbe messo tutte le diapositive off-page e quindi avere i link numerati utilizzano ancore per tirare quelle in vista. Il tuo caso d'uso dovrebbe essere un po 'più semplice di quello che sta facendo, dal momento che non c'è bisogno di oscurare il resto della pagina.

Answer 2

Quello che dovete fare è di mettere ciò che è necessario far scorrere all'interno di un contenitore con dimensioni fisse e "troppo pieno" la proprietà insieme alla nascosto. Poi, all'interno di questo contenitore, mettete i vostri contenuti "scorrevoli" all'interno di una lista di elementi di ancoraggio con il set "display" per bloccare e la dimensione stessa del contenitore. Se, da un link sulla pagina, si chiama uno degli ancoraggi nella lista, l'elemento con il nome corrispondente di ancoraggio sarà automgically presentarsi .. semplice.