WebSite X5Help Center

 
Stiac Engineering
Stiac Engineering
User

Aggiungere Attributo a tag A al click  it

Автор: Stiac Engineering
Просмотрено 1508, Подписчики 2, Размещенный 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?

Размещено
9 Ответы
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца 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>

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Stiac Engineering
Stiac Engineering
User
Автор

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?

Читать больше
Размещено От Stiac Engineering
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца 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"

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Stiac Engineering
Stiac Engineering
User
Автор

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>

Читать больше
Размещено От Stiac Engineering
Stiac Engineering
Stiac Engineering
User
Автор

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

Читать больше
Размещено От Stiac Engineering
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца 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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Stiac Engineering
Stiac Engineering
User
Автор

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. 

Читать больше
Размещено От Stiac Engineering
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца 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...

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Stiac Engineering
Stiac Engineering
User
Автор

Oh me ne sono completamente dimenticato, scusa.

Читать больше
Размещено От Stiac Engineering