tengo un menú tengo algunos divs y quiero cambiar la visualización de mis divs a ninguno excepto el div que está relacionado con el elemento del menú en el que se hace clic. escribí algunos códigos pero no funcionó y cambié todos mis divs a ninguno aquí están mis códigos
var myValue, number, newArray; var myArray = [1, 2, 3, 4, 5, 6]; $(".BreakfastLi").click(function() { myValue = 1; }) $(".LunchLi").click(function() { myValue = 2; }) $(".DinnerLi").click(function() { myValue = 3; }) $(".DesertLi").click(function() { myValue = 4; }) $(".SoupLi").click(function() { myValue = 5; }) $(".DrinkLi").click(function() { myValue = 6; }) for (var i = 0; i < 6; i++) { newArray = myArray.filter(num => num !== myValue); number = newArray[i]; $(".group" + number).addClass("d-none"); } .d-none { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <ul class="foodMenu"> <li class="BreakfastLi">Breakfast</li> <li class="LunchLi">Lunch</li> <li class="DinnerLi">Dinner</li> <li class="DesertLi">Desert</li> <li class="SoupLi">Soups</li> <li class="DrinkLi">Drinks</li> </ul> <div class="group1">some content</div> <div class="group2">some content</div> <div class="group3">some content</div> <div class="group4">some content</div> <div class="group5">some content</div> <div class="group6">some content</div>Querrá que el código de mostrar/ocultar se ejecute en cada clic. Sin embargo, realmente no necesita myValue o myArray .
function showGroup(i) { $(".group").addClass("d-none"); // hide all groups $("#group" + i).removeClass("d-none"); // show selected group } $(".BreakfastLi").click(function() { showGroup(1); }) $(".LunchLi").click(function() { showGroup(2); }) $(".DinnerLi").click(function() { showGroup(3); }) $(".DesertLi").click(function() { showGroup(4); }) $(".SoupLi").click(function() { showGroup(5); }) $(".DrinkLi").click(function() { showGroup(6); }); showGroup(0); // hide everything by default .d-none { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <ul class="foodMenu"> <li class="BreakfastLi">Breakfast</li> <li class="LunchLi">Lunch</li> <li class="DinnerLi">Dinner</li> <li class="DesertLi">Desert</li> <li class="SoupLi">Soups</li> <li class="DrinkLi">Drinks</li> </ul> <div class="group" id="group1">some content 1</div> <div class="group" id="group2">some content 2</div> <div class="group" id="group3">some content 3</div> <div class="group" id="group4">some content 4</div> <div class="group" id="group5">some content 5</div> <div class="group" id="group6">some content 6</div>AKX lo puso en el camino correcto, pero las clases están destinadas a ser conjuntos de cosas similares. Usemos uno y el índice de elementos para simplificar enormemente.
La advertencia con esto es que la cantidad y el orden de los elementos del grupo deben corresponder a los elementos de la lista, pero esa es una estrategia común y es menos frágil que administrar lo que equivale a un montón de valores de ID arbitrarios.
function showGroup(i) { $(".group").addClass("d-none"); // hide all groups if (i !== null) { $(".group").eq(i).removeClass("d-none"); // show selected group } } $(".meal").click(function() { showGroup($(this).index()); }) showGroup(); // hide everything by default .d-none { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <ul class="foodMenu"> <li class="meal">Breakfast</li> <li class="meal">Lunch</li> <li class="meal">Dinner</li> <li class="meal">Desert</li> <li class="meal">Soups</li> <li class="meal">Drinks</li> </ul> <div class="group">some Breakfast content</div> <div class="group">some Lunch content</div> <div class="group">some Dinner content</div> <div class="group">some Desert content</div> <div class="group">some Soups content</div> <div class="group">some Drinks content</div>