Tengo una simple función para cambiar de elemento de lista de clase de «activo» a «inactivo». ¿Cuál es la manera más eficiente (es decir, utilizando la menor cantidad de código) para el conjunto de todos los demás elementos de la lista a «inactivo», de modo que sólo puede haber un «activo» elemento de la lista? Por favor vea a continuación un ejemplo. Gracias

<ul class="menu">
    <li id="one" class="active">One</li>
    <li id="two" class="inactive">Two</li>
    <li id="three" class="inactive">Three</li>
    <li id="four" class="inactive">Four</li>
    <li id="five" class="inactive">Five</li>
</ul>

<script>
    $('#one').click(function () {
        if ($(this).hasClass("inactive")) {
            $(this).removeClass("inactive").addClass("active");
        } else {
            $(this).removeClass("active").addClass("inactive");
        }
    });
</script>
InformationsquelleAutor Arkady | 2013-07-24

5 Comentarios

  1. 11

    Esto puede funcionar:

    $('.menu li').click(function () {
        $('.menu li').not(this).removeClass('active').addClass('inactive');
        $(this).addClass('active').removeClass('inactive');
    });

    o

    $('.menu li').click(function () {
        $('.menu li').removeClass('active').addClass('inactive');
        $(this).toggleClass('active inactive');
    });

    El segundo método es más corto, pero más lento.

    http://jsperf.com/toggle-vs-add-remove

    Edición: Este es más corto y más rápido:

    $('.menu li').click(function () {
        $('.menu li').not(this).removeClass('active');
        $(this).addClass('active');
    });

    Si el rendimiento es realmente un problema, usted puede almacenar su menú en una variable y realizar operaciones en esta variable, como:

    var $menu = $('.menu li');
    $menu.click(function () {
            $menu.not(this).removeClass('active');
            $(this).addClass('active');
        });
    • Usted debe utilizar el toggleClass() función en lugar de addClass(‘active’).removeClass («inactivo»);
    • Cierto, pero es más lento. Añadido a mi respuesta de todos modos.
    • He editado tu respuesta, si perforance es un problema (no lo creo), que podría ser mejorado y que no es necesario para mantener la «inactivo» de la clase (por defecto está desactivada)
  2. 1

    Por razones de brevedad:

    $('ul.menu li').click(function () {
        $(this).siblings().attr('class', 'inactive').end().toggleClass('inactive active');
    });

    JS Violín demo (127 caracteres, espacios en blanco-eliminado el carácter-total: 115).

    Carácter-cuenta en JS Violín, ya que la brevedad era la intención, me parece.

    Desafortunadamente, dado el problema identificado en los comentarios, a continuación, de una corrección de la aplicación es un poco más detallado de la (actualmente aceptada por la respuesta), las alternativas son:

    $('ul.menu li').click(function () {
        var t = this;
        $(this).siblings().add(t).attr('class', function (){
            return t === this ? 'active' : 'inactive';
        });
    });

    JS Violín demo (174 personajes, espacio en blanco-eliminado el carácter-total: 133).

    O:

    $('ul.menu li').click(function () {
        var t = this;
        $(this).parent().children().attr('class', function (){
            return t === this ? 'active' : 'inactive';
        });
    });

    JS Violín demo (176 personajes, espacio en blanco-eliminado el carácter-total: 135).

    De curso, espacio en blanco-se ha eliminado jQuery hace algo ilegible, pero aún así: yo reclamo la, uh, moral la victoria…

    Referencias:

    • gracias! No me había manchado y que, por desgracia, fue incapaz de corregir que mientras que también mantener la brevedad. A pesar de que es más debido a la (necesaria) de almacenamiento en caché de la variable, así como la sangría y las nuevas líneas que la real, visible caracteres en la pantalla. Así, mientras que yo mantener mi llamada » moral de victoria,’ tengo que admitir la derrota. Lamentablemente… =)
    • Tomás, Gracias por tu respuesta, muy buen material
  3. 0
    $('ul li').click(function() {
        $('ul li').each(function() {
           $(this).removeClass('active'); 
        });
        $(this).addClass('active');  
    });

    JSFiddle

  4. 0

    Si el SEO no es importante, y para utilizar la menor cantidad de código que yo diría que el uso de un botón de radio de la lista.
    A continuación, puede estilo e interactuar en JavaScript usando el «:checked» selector.

Dejar respuesta

Please enter your comment!
Please enter your name here