WebSite X5Help Center

 
Stiac Engineering
Stiac Engineering
User

Aggiungere Attributo a tag A al click  it

Author: Stiac Engineering
Visited 1509, Followers 2, Shared 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?

Posted on the
9 ANSWERS
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

<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>

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Stiac Engineering
Stiac Engineering
User
Author

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?

Read more
Posted on the from Stiac Engineering
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

.. 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"

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Stiac Engineering
Stiac Engineering
User
Author

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>

Read more
Posted on the from Stiac Engineering
Stiac Engineering
Stiac Engineering
User
Author

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');

Read more
Posted on the from Stiac Engineering
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... 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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Stiac Engineering
Stiac Engineering
User
Author

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. 

Read more
Posted on the from Stiac Engineering
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... 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...

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Stiac Engineering
Stiac Engineering
User
Author

Oh me ne sono completamente dimenticato, scusa.

Read more
Posted on the from Stiac Engineering