Come si imposta un evento onclick di JavaScript su una classe con css

Question

Diciamo che voglio che ogni volta che l'utente fa clic su qualsiasi collegamento appare un avviso che dice "hohoho". Devo aggiungere onclick="alert('hohoho')" a ogni link o posso impostarlo con CSS in modo che funzioni con ogni link?

Answer 1

Non puoi farlo con solo i CSS, ma si può farlo con Javascript, e (facoltativamente) jQuery.

Se si vuole fare senza jQuery:

<script> 
    window.onload = function() { 
     var anchors = document.getElementsByTagName('a'); 
     for(var i = 0; i < anchors.length; i++) { 
      var anchor = anchors[i]; 
      anchor.onclick = function() { 
       alert('ho ho ho'); 
      } 
     } 
    } 
</script> 

E di farlo senza jQuery, e solo su una specifica classe (es: hohoho):

<script> 
    window.onload = function() { 
     var anchors = document.getElementsByTagName('a'); 
     for(var i = 0; i < anchors.length; i++) { 
      var anchor = anchors[i]; 
      if(/\bhohoho\b/).match(anchor.className)) { 
       anchor.onclick = function() { 
        alert('ho ho ho'); 
       } 
      } 
     } 
    } 
</script> 

Se sei a posto con l'utilizzo di jQuery, allora si può fare questo per tutte le ancore:

<script> 
    $(document).ready(function() { 
     $('a').click(function() { 
      alert('ho ho ho'); 
     }); 
    }); 
</script> 

E questo frammento di codice jQuery da applicare solo ad ancore con una specifica classe:

<script> 
    $(document).ready(function() { 
     $('a.hohoho').click(function() { 
      alert('ho ho ho'); 
     }); 
    }); 
</script> 

Answer 2

Si potrebbe fare con jQuery.

$('.myClass').click(function() { 
    alert('hohoho'); 
}); 

Answer 3

Molte librerie JavaScript di terze parti consentono di selezionare tutti gli elementi a cui è stata applicata una classe CSS con un nome particolare. Quindi puoi iterare quegli elementi e allegare dinamicamente il gestore.

Non esiste un modo specifico CSS per eseguire questa operazione.

In JQuery, si può fare:

$(".myCssClass").click(function() { alert("hohoho"); }); 

Answer 4

Esso non può essere fatto tramite CSS come CSS cambia solo la presentazione (per esempio solo Javascript può fare il popup di avviso). Mi piacerebbe fortemente consiglio di controllare una libreria JavaScript chiamato jQuery quanto rende facendo qualcosa di simile banale:

$(document).ready(function(){ 
    $("a").click(function(){ 
    alert("hohoho"); 
    }); 
}); 

Answer 5

Si può fare questo pensando a un po 'diverso. Rileva quando si fa clic sul corpo (document.body.onclick - ad es.nulla sulla pagina) e quindi controllare se l'elemento cliccato (event.srcElement/e.target) ha una classe e che tale nome della classe è quello che si desidera:

document.body.onclick = function(e) { //when the document body is clicked 
    if (window.event) { 
     e = event.srcElement;   //assign the element clicked to e (IE 6-8) 
    } 
    else { 
     e = e.target;     //assign the element clicked to e 
    } 

    if (e.className && e.className.indexOf('someclass') != -1) { 
     //if the element has a class name, and that is 'someclass' then... 
     alert('hohoho'); 
    } 
} 

o una versione più concisa di quanto sopra:

document.body.onclick= function(e){ 
    e=window.event? event.srcElement: e.target; 
    if(e.className && e.className.indexOf('someclass')!=-1)alert('hohoho'); 
} 

Answer 6

Qui è la mia soluzione attraverso i CSS, non usa alcun JavaScript affatto

HTML:

<a href="#openModal">Open Modal</a> 

<div id="openModal" class="modalDialog"> 
     <div> <a href="#close" title="Close" class="close">X</a> 

       <h2>Modal Box</h2> 

      <p>This is a sample modal box that can be created using the powers of CSS3.</p> 
      <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p> 
     </div> 
    </div> 

CSS:

.modalDialog { 
    position: fixed; 
    font-family: Arial, Helvetica, sans-serif; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0, 0, 0, 0.8); 
    z-index: 99999; 
    opacity:0; 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
    pointer-events: none; 
} 
.modalDialog:target { 
    opacity:1; 
    pointer-events: auto; 
} 
.modalDialog > div { 
    width: 400px; 
    position: relative; 
    margin: 10% auto; 
    padding: 5px 20px 13px 20px; 
    border-radius: 10px; 
    background: #fff; 
    background: -moz-linear-gradient(#fff, #999); 
    background: -webkit-linear-gradient(#fff, #999); 
    background: -o-linear-gradient(#fff, #999); 
} 
.close { 
    background: #606061; 
    color: #FFFFFF; 
    line-height: 25px; 
    position: absolute; 
    right: -12px; 
    text-align: center; 
    top: -10px; 
    width: 24px; 
    text-decoration: none; 
    font-weight: bold; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    -moz-box-shadow: 1px 1px 3px #000; 
    -webkit-box-shadow: 1px 1px 3px #000; 
    box-shadow: 1px 1px 3px #000; 
} 
.close:hover { 
    background: #00d9ff; 
} 

CSS alert No JavaScript Just pure HTML and CSS

credo che farà il trucco per voi come è stato per me