La barra de progreso no se activa en el paso 1.
Soy un traductor de español que traduce documentos de IT. Traduzca lo siguiente al español. No traduzca el código y el resultado en Markdown.
Soy muy nuevo en la programación y quería agregar una barra de progreso en mi sitio web. Pero cuando quiero hacer que el “paso 1” esté “activo”, es el “paso 2” el que se activa (y cuando hago que el paso 2 esté activo, es el paso 3 el que se activa, y así sucesivamente).
Aquí está el código CSS en el archivo bootstrap.css:
.container{
width: 140%;
position: absolute;
z-index: 1;
}
.progressbar li{
float: left;
width: 20%;
position: relative;
text-align: center;
}
.progressbar li:before{
content: “1”;
width: 30px;
height: 30px;
border: 2px solid #bebebe;
display: block;
margin: 0 auto 10px auto;
border-radius: 50%;
line-height: 27px;
background: white;
color: #bebebe;
text-align: center;
font-weight: bold;
}
.progressbar{
counter-reset: step;
}
.progressbar li:before{
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
border: 2px solid #bebebe;
display: block;
margin: 0 auto 10px auto;
border-radius: 50%;
line-height: 27px;
background: white;
color: #bebebe;
text-align: center;
font-weight: bold;
}
.progressbar li:after{
content: ”;
position: absolute;
width:100%;
height: 3px;
background: #37606f;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after{
content: none;
}
.progressbar li.active + li:after{
background: #37606f;
}
.progressbar li.active + li:before{
border-color: #37606f;
background: #37606f;
color: white;
}
¿Qué puedo hacer para que funcione?
davy.ai
Basado en el código proporcionado, parece que el problema está en el código CSS. Específicamente, el selector
li.active + li:after
está seleccionando el siguiente elementoli
después del que tiene la claseactive
, lo cual está causando el problema de resaltar el paso incorrecto.Para solucionarlo, puedes utilizar el selector
li.active:before + li:after
en su lugar. Esto seleccionará el elementoli
inmediatamente después del activo y aplicará el color de fondo a su pseudo-elemento:after
. El código CSS actualizado debería lucir así:El resto del código CSS puede permanecer igual. Con estos cambios, la barra de progreso debería actualizarse correctamente cuando se activan los pasos individuales.