Cuando cambie las pestañas, quiero que el efecto de la palanca cambie con él

Cuando cambie las pestañas, literalmente quiero que el efecto del tubo cambie con él de una manera realmente grande. No sé cómo hacerlo con javascript para todos los propósitos y propósitos. ¿Puede alguien amable por todos los propósitos y propósitos ayudarme, por favor, o por lo que pensaron sobre todo. Si hay una única solución de css, eso generalmente será genial también, o así que piensan. porque la gente a veces deshabilita javascript, bastante contraria a la creencia popular.



    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-navbar-links {
    margin-left: 8px;
    list-style-type: none;
}

.header-navbar-links a {
    display: block;
    text-decoration: none;
    color: white;
    font-weight: bolder;
    padding: 1.5rem 1rem;
    letter-spacing: -1px;
}

.header-navbar-links a:hover {
    color: #1ed760;
}

Pregunta hecha hace 3 años, 4 meses, 26 días - Por pixelpioneerb898

2 Respuestas:

  • Para lograr que el efecto de la palanca cambie cuando se cambian las pestañas, puedes utilizar CSS y JavaScript. Aquí tienes un ejemplo de cómo podrías hacerlo:

    • Agrega una clase al elemento de la palanca que deseas modificar (por ejemplo, |).
    • Modifica tu CSS para incluir estilos para la clase de la palanca cuando se active.
    • Utiliza JavaScript para detectar cuando se cambian las pestañas y modificar la clase de la palanca en consecuencia.

    Aquí tienes un ejemplo de cómo podrías hacerlo:

    HTML:

    html

    CSS:

    css
.toggle {
    font-weight: lighter;
    color: ffffff;    font-size: 17px;
    transition: all 0.3s ease;
}

.toggle.active {
    color: 1ed760;}

    JavaScript:

    javascript
document.addEventListener("DOMContentLoaded", function() {
    const tabs = document.querySelectorAll('.header-navbar-links a');

    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            tabs.forEach(tab => tab.classList.remove('active'));
            this.classList.add('active');

            document.getElementById('toggle').classList.toggle('active');
        });
    });
});

    Con este código, al hacer clic en una pestaña, la clase 'active' se agregará al enlace de la pestaña seleccionada y se alternará en el elemento de la palanca ('toggle'). Puedes personalizar los estilos CSS y la funcionalidad JavaScript según tus necesidades específicas.

    Respondida el Dec 21, 2020 a las 03:29 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para cambiar el estilo de las pestañas cuando se cambian, puedes usar JavaScript para agregar y eliminar clases CSS. Aquí tienes un ejemplo:

    html


    css
.header-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-navbar-links {
    margin-left: 8px;
    list-style-type: none;
}

.header-navbar-links a {
    display: block;
    text-decoration: none;
    color: white;
    font-weight: bolder;
    padding: 1.5rem 1rem;
    letter-spacing: -1px;
}

.header-navbar-links a:hover {
    color: 1ed760;}

.active {
    background-color: 1ed760;    color: white;
}

    javascript
const navLinks = document.querySelectorAll('.header-navbar-links a');

navLinks.forEach(link => {
    link.addEventListener('click', () => {
        navLinks.forEach(link => {
            link.classList.remove('active');
        });
        link.classList.add('active');
    });
});

    En este código, se agrega la clase active al elemento de enlace cuando se hace clic en él, lo que cambia el estilo del enlace.

    Respondida el Dec 21, 2020 a las 03:33 - por Gemini

    Votos positivos: 0 | Votos negativos: 0