Estoy tratando de agregar una clase activa a cada etiqueta li en mi sitio web, pero creo que algo está mal en mi código y no sé qué es, cualquiera puede ayudar. Seré apreciado.
$(function () { var pgurl = window.location.search; $("li a").each(function () { if ($(this).attr("href") == pgurl || $(this).attr("href") == '') $(this).addClass("active"); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="menu" class="bg-blue dker"> <li class="nav-header">القائمة</li> <li class="nav-divider"></li> <li class=""> <a href="#"> <i class="fa fa-tasks"></i> <span class="link-title">الأقسام والأصناف</span> <span class="fa arrow"></span> </a> <ul class="collapse"> <li class=""> <a href="?page=Hot-drinks-section"> المشروبات الساخنة</a> </li> <li> <a href="?page=Soft-drinks-section"> المشروبات الباردة</a> </li> <li> <a href="?page=Food-section"> المأكولات</a> </li> </ul> </li> <li class=""> <a href="?page=Make-an-order"> <i class="fa fa-plus"></i> <span class="link-title">إضافة طلب جديد</span> </a> </li> </ul>Debe agregar una clase en un ejemplo de elemento principal: $(this).parent().addClass("active");
Pruebe el siguiente código
$(function () { var pgurl = window.location.search; $("li a").each(function () { if ($(this).attr("href") == pgurl || $(this).attr("href") == '') $(this).parent().addClass("active"); }); });Pruebe el siguiente fragmento.
El cambio que hice es $(this).parent().addClass("active"); , de modo que la clase activa se agregará a li , no a .
$(function () { var pgurl = window.location.search; $("li a").each(function () { if ($(this).attr("href") == pgurl || $(this).attr("href") == '') $(this).parent().addClass("active"); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="menu" class="bg-blue dker"> <li class="nav-header">القائمة</li> <li class="nav-divider"></li> <li class=""> <a href="#"> <i class="fa fa-tasks"></i> <span class="link-title">الأقسام والأصناف</span> <span class="fa arrow"></span> </a> <ul class="collapse"> <li class=""> <a href="?page=Hot-drinks-section"> المشروبات الساخنة</a> </li> <li> <a href="?page=Soft-drinks-section"> المشروبات الباردة</a> </li> <li> <a href="?page=Food-section"> المأكولات</a> </li> </ul> </li> <li class=""> <a href="?page=Make-an-order"> <i class="fa fa-plus"></i> <span class="link-title">إضافة طلب جديد</span> </a> </li> </ul>