Modifier le style d'un pseudo-élément avec JQuery
Hola, bonjour à tous,
J'ai réalisé des "boutons/puces" lien pour filtrer des informations sur une page.
Chacun d'entre eux a un code couleur différent, et je souhaiterais qu'en cliquant dessus, ils changent de couleur (selon s'ils sont actifs ou non actifs).
Comment faire pour modifier le style css au niveau des .tags li:first-child a:before, .tags li:nth-child(2) a:before, etc... en JQuery?
Le code HTML :
Code:
1
2
3
4
5
6
7
| <ul class="tags">
<li><a href="#" class="BtnFiltre" id="winbet">Paris gagnés</a></li>
<li><a href="#" class="BtnFiltre" id="lostbet">Paris perdus</a></li>
<li><a href="#" class="BtnFiltre" id="inprogressbet">Paris en cours misés</a></li>
<li><a href="#" class="BtnFiltre" id="inprogressnobet">Paris en cours non misés</a></li>
<li><a href="#" class="BtnFiltre" id="endedbetnobet">Paris terminés ou clôturés non misés</a></li>
</ul> |
Le code JS:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script type="text/javascript">
$(document).ready(function() {
$('.BtnFiltre').click(function(){
var BtnFiltreValue = $(this).attr('id');
var ajaxurl = 'change.php',
data =* {'action': BtnFiltreValue};
$.post(ajaxurl, data, function (response) {
alert("action performed successfully");
});
});
});
</script> |
Le code CSS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| .tags {
margin: 0;
padding: 0;
position: relative;
right: 9px;
/* bottom: -12px; */
list-style: none;
}
.tags li, .tags a {
float: left;
height: 24px;
line-height: 24px;
position: relative;
font-size: 11px;
margin-bottom: 5px;
}
.tags li:first-child a{ background:#4CAF50; }
.tags li:first-child a:before{ border-color:transparent #4CAF50 transparent transparent;}
.tags li:nth-child(2) a{ background:#e65224; }
.tags li:nth-child(2) a:before{ border-color:transparent #e65224 transparent transparent;}
.tags li:nth-child(3) a{ background:#0089e0; }
.tags li:nth-child(3) a:before{ border-color:transparent #0089e0 transparent transparent;}
.tags li:nth-child(4) a{ background:#FEC300; }
.tags li:nth-child(4) a:before{ border-color:transparent #FEC300 transparent transparent;}
.tags li:nth-child(5) a{ background:#8CC6D7; }
.tags li:nth-child(5) a:before{ border-color:transparent #8CC6D7 transparent transparent;}
.tags a{
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.tags a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.tags a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.tags a:hover{background:#555;}
.tags a:hover:before{border-color:transparent #555 transparent transparent;} |
