Je veux changer la couleur d'arrière-plan et la couleur de l'icône lorsque je clique sur la barre (barre active). Ou si je ne peux pas changer la couleur de l'icône, je veux changer l'icône avec une autre couleur. Ceci est mon code et n'a pas changé.
Je n'utilise pas la classe 'active', j'utilise la classe 'clicks'.
J'utilise Codeigniter et Bootstrap pour Framework PHP. p>
Ceci est mon CSS
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="application/javascript">
$(document).ready(function(){
$('ul li a').click(function(){
$('li a').removeClass("clicks");
$(this).addClass("clicks");
});
});
</script>
<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link clicks" href="<?php echo site_url('') ?>"><img class="iconics" src=".\assets\img\icon\home-icon.png" /></a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo site_url('product') ?>"><img class="icons" src=".\assets\img\icon\product-icon.png" /></a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo site_url('feed') ?>"><img class="icons" src=".\assets\img\icon\feed-icon.png" /></a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo site_url('confirm') ?>"><img class="icons" src=".\assets\img\icon\payment-icon.png" /></a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo site_url('contact') ?>"><img class="icons" src=".\assets\img\icon\contact-icon.png" /></a>
</li>
</ul>
</div>
Ceci est mon code Navbar
/* Change the color of links on hover */
.navbar-page a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.navbar-page a.active {
background-color: #4CAF50;
color: white;
}
.navbar-page img {
width: 20%;
height: 20%;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px 12px;
}
.icons {
width: 100%;
height: 100%;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding-top: 0px;
padding-bottom: 10px;
padding-right: 5px;
padding-left: 5px;
}
/* Style the active class, and buttons on mouse-over
.active, .btn:hover {
background-color: #666;
color: white;
}
*/
/* Style the active class */
.active {
background-color: #D3D3D3;
color: black;
}
.clicks {
background-color: #5A5D5A;
width: 100%;
height: 100%;
color: blue;
border-radius: 12px;
}
#nav li.clicks a {
background-color: blue;
}
4 Réponses :
Cela fonctionnera si vous ne voulez pas que la page soit redirigée et js ajoutera la classe, si la page se charge via ajax ou quelque chose comme ça. event.preventDefault () l'empêchera.
<?php
$current_url = current_url();
?>
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link <?=(site_url('/')==$current_url)?'clicks':''?>" href="<?php echo site_url('/') ?>"><img class="iconics" src=".\assets\img\icon\home-icon.png" /></a>
</li>
<li class="nav-item">
<a class="nav-link <?=(site_url('product')==$current_url)?'clicks':''?>" href="<?php echo site_url('product') ?>"><img class="icons" src=".\assets\img\icon\product-icon.png" /></a>
</li>
<li class="nav-item">
<a class="nav-link onclicks <?=(site_url('feed')==$current_url)?'clicks':''?>" href="<?php echo site_url('feed') ?>"><img class="icons" src=".\assets\img\icon\feed-icon.png" /></a>
</li>
<li class="nav-item">
<a class="nav-link <?=(site_url('confirm')==$current_url)?'clicks':''?>" href="<?php echo site_url('confirm') ?>"><img class="icons" src=".\assets\img\icon\payment-icon.png" /></a>
</li>
<li class="nav-item">
<a class="nav-link <?=(site_url('contact')==$current_url)?'clicks':''?>" href="<?php echo site_url('contact') ?>"><img class="icons" src=".\assets\img\icon\contact-icon.png" /></a>
</li>
</ul>
</div>
Si votre page redirige après avoir cliqué sur alors, vous pouvez utiliser la fonction php pour ajouter une classe
<script type="application/javascript">
jQuery(document).ready(function($){
$('ul li a').click(function(e){
e.preventDefault();
$('li a').removeClass("clicks");
$(this).addClass("clicks");
});
});
</script>
Pour la page lorsque vous cliquez, la barre est redirigée vers la page au clic. Et pour cela, je choisis le choix du bas?
@GloriaMahena oui
Aussi, je suggérerais d'essayer d'initialiser votre jquery avec jQuery au lieu de $, vérifiez que j'ai mis à jour mon code.
D'accord, je vais essayer broooo: D
Eh bien, ça marche, en quelque sorte ... :) Essayez de définir ce style sur votre css.
a {height: 30px; display: block;} Et supprimez 100% de la hauteur de la classe .clicks.
Vous verrez que la hauteur de l'ancre n'est pas visible et c'était le problème. Pouvez-vous publier une capture d'écran pour savoir s'il y a un problème de visibilité?
non, quand j'ai ajouté manuellement la classe des clics, ses modifications. pour mes codes, le javascript n'est pas fonctionnellement :(
Eh bien, je l'ai testé sans php, juste du html et du css simples et cela fonctionne bien, essayez d'inspecter le CSS via Chrome, inspectez et trouvez si un élément chevauche des balises d'ancrage ou s'il y a des "événements de pointeur: aucun" placés sur des éléments d'ancrage ou parents.
Je suppose que cela supprime puis ajoute à nouveau instantanément la classe? Essayez d'utiliser une instruction if pour vérifier si elle l'a déjà ou non, etc.
$(document).ready(function(){
$("ul li a").click(function () {
if ($( "li a" ).hasClass("clicks")) {
$("li a").removeClass("clicks")
} else {
$("li a").add("clicks")
}
});
});
votre code jquery fonctionne, je ne connais pas les détails de votre code, peut-être des espaces dans l'élément a, cela pose le problème.
essayez d'ajouter:
.nav-link {
display:inline-block;
}
ou dans votre cas
a {
display:inline-block;
}
vérifier: https: // jsfiddle.net/nwoxasf6/1/
Merci bro, tapi gue heran masi gabisa di gue faktor css dari bootstrap nya kayanya
@GloriaMahena oalah pake bootstrap pasti ketimpa sama classnya bootstrap, kenapa ngga coba pake fontawesome atau glyphicons?