Aggiungere Attributo a tag A al click 
Autore: Stiac Engineering
Visite 1323,
Followers 2,
Condiviso 0
Salve ragazzi, stavo provando a strutturare una bozza di menu senza dover costruire e inserire in ogni singola pagina l'HTML dello stesso.
Se avete del tempo da dedicarmi vorrei chiedere un vostro aiuto, al buon Claudio e KolAsim.
Il problema? Inserire al click aria-current="page" all'interno di un tag <a>.
Sono riuscito a inserire la classe per aprire i chiudere i menu, ma ho qualche difficoltà con l'inserimento dell'attributo.
Ho preso spunto da questo articolo https://www.w3schools.com/howto/howto_js_active_element.asp
Questo è l'URL di test https://www.stiac.it/sws/dashboard.php
Se si preme sulla voce del menu "Users" si può vedere che "All Users" ha applicato l'attributo.
Qualche consiglio?
Postato il
<a id="K1" href="pagina_1.html" > pagina 1 </a>
<br><br>
<a id="K2" href="javascript:attrK()" > pulsante </a>
<script>
function attrK() {$("#K1").attr("aria-current","page")}
</script>
................................
... K1 diventerà: <a id="K1" href="pagina_1.html" aria-current="page" > pagina 1 </a>
.
Autore
Buonasera KolAsim! Grazie per il prezioso spunto.
Ho provato ma non funziona. Almeno da offline mi apre la finestra in una pagina esterna, mentre l'href ha come target l'iframe:
Sempre online sono riuscito a reperire un secondo spunto https://codepen.io/stiac/pen/MWXJRaO che riesce a inserire la classe. Ora stavo provando a usare il JS presente per inserire il codice in JS jQuery.
Una volta aggiunto ad esempio:
$('.nav__link').attr('aria-current', 'page')
non riesco a eliminarlo.
Qualche consiglio?
.. forse non ho capito, e non ho capito cosa vorresti fare e come, ma, aria-current="page" non è un classe, che è altra cosa...
... viceversa, questa sarebbe una classe: class="NomeClasse"
.
Autore
Quello che vorrei fare è inserire dinamicamente l'attributo aria-current="page"all'elemento selezionato, così come viene inserita e rimossa la classe corrente.
Quando selezionato inserirlo:
<a class="nav__link active" aria-current="page" href="#">Pagina</a>
Click su altro elemento che non è la classe nav__link impostarlo normale:
<a class="nav__link" href="#">Pagina</a>
Autore
Risolto, modificando così:
elems.forEach( elem => { elem.classList.remove('active'); elem.removeAttribute('aria-current') }); evt.target.classList.add('active'); evt.target.setAttribute('aria-current', 'page');
... il mio codice assolveva alla domanda, per come avevo indicato nel risultato e per come si vede nel tuo STAMP...
... per il resto, sai tu cosa vuoi ottenere, e meglio così che ne hai trovato la strada...
ciao
.
Autore
Buongiorno KolAsim,
come sempre ti ringrazio per il prezioso tempo dedicato. Tu e molti altri di questa community siete i "padri" della mia passione per i codici extra.
Ho messo un esempio del tuo codice direttamente online (https://codepen.io/stiac/pen/OJEpXQY), ma anche lì non riesco a farlo funzionare.
Posto una nuova pagina di test, così posso lavorare sulla prima.
Link: https://www.stiac.it/sws/sample.php
A me serviva il modo per inserire l'attributo aria-current="page" alla voce cliccata, e rimuoverlo allo stesso tempo dalle altre voci non attinenti alla pagina corrente, senza agire sull'href.
L'attributo fa da controllo sul CSS. Se apri il link, puoi vedere che l'attributo è inizialmente presente sulla voce All User perché inserito già di default:
Quando premi l'altra voce, come ad esempio Add New, lo script rimuove lo stesso dalla voce precedente e lo inserisce in quella cliccata:
Come risultato finale ottengo un menu che mi evidenzia le voci cliccate, ma senza dover modificare in ogni singola pagina l'HTML, così da poter meglio ottimizzare la struttura di navigazione.
... te lo avevo detto per un altro codice che avevi postato in passato su codepen; ...l'esempio non può funzionare perché manca la libreria jQuery, ed invece funziona nel programma che ne è provvisto, come da tuo precedente STAMP...
.
Autore
Oh me ne sono completamente dimenticato, scusa.