Dado un documento HTML que contiene una lista de elementos y la tarea es cambiar el color de fondo de la lista de elementos cuando el elemento está activo. El estado de la lista de elementos se puede cambiar cambiando la propiedad CSS de color de fondo .
Sintaxis:
background-color: color | transparent;
Valores de propiedad:
- color: Especifica el color de fondo del elemento.
- transparente: Especifica que el color de fondo debe ser transparente.
Por lo tanto, el color de fondo de un elemento de navegación activo se puede cambiar de la siguiente manera cambiando la propiedad CSS de color de fondo.
Sintaxis:
.navbar-nav > .active > a {
background-color: color ;
}
Ejemplo:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
How to change the background
color of the active nav-item?
</title>
</head>
<body>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css"/>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src=
"https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<style>
.nav-link {
color: green;
}
.nav-item>a:hover {
color: green;
}
/*code to change background color*/
.navbar-nav>.active>a {
background-color: #C0C0C0;
color: green;
}
</style>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">
Home
<span class="sr-only">
(current)
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
GeeksForGeeks Interview Prep
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
GeeksForGeeks Courses
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled"
href="#">Disabled</a>
</li>
</ul>
<script>
$(document).ready(function () {
$('ul.navbar-nav > li')
.click(function (e) {
$('ul.navbar-nav > li')
.removeClass('active');
$(this).addClass('active');
});
});
</script>
</body>
</html>
Producción:
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por sayaliparulekar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA