Quiero transformar los enlaces de la barra de navegación de nav-link a btn al cambiar el tamaño de la ventana. Cuando el tamaño de las ventanas >=601 - el elemento de navegación cambia. Pero el problema es cuando el ancho supera los 600 . El enlace de navegación no cambia la clase nav-link .
var alterClass = function() { var ww = document.body.clientWidth; if (ww <= 600) { $('li.nav-item a').removeClass('nav-link'); console.log('nav-link removed') } else if (ww >= 601) { $('li.nav-item a').addClass('btn btn-primary'); console.log('btn-primary added'); }; }; $(window).resize(function() { alterClass(); }); //Fire it when the page first loads: alterClass(); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/> <ul class="nav nav-pills nav-fill"> <li class="nav-item"> <a class="nav-link" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Much longer nav link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> Quiero que el elemento de navegación se transforme entre nav-link y btn al cambiar el tamaño.
Encuentre el violín aquí: https://jsfiddle.net/m6r71gp0/
No sé cuál podría ser el problema en su extremo. Puede ser que haya agregado y eliminado clases en el orden incorrecto. Mira esto y me avisas.
var alterClass = function() { var ww = document.body.clientWidth; if (ww <= 600) { $('li.nav-item a').removeClass('btn btn-primary'); $('li.nav-item a').addClass('nav-link'); console.log('turned into link style') } else if (ww >= 601) { $('li.nav-item a').removeClass('nav-link'); $('li.nav-item a').addClass('btn btn-primary'); console.log('turned into button style'); } }; $(window).resize(function() { alterClass(); }); //Fire it when the page first loads: alterClass(); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <ul class="nav nav-pills nav-fill"> <li class="nav-item"> <a class="nav-link" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Much longer nav link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>JSFiddle: https://jsfiddle.net/dL4361x2/1/
Lo que obtuve después de una hora de prueba:
var alterClass = function() { var ww = document.body.clientWidth; if (ww <= 600) { $('li.nav-item a').removeClass('nav-link'); $('li.nav-item a').addClass('btn btn-primary'); console.log('nav-link removed') } else if (ww >= 601) { $('li.nav-item a').removeClass('btn btn-primary'); console.log('btn-primary added'); }; }; $(window).resize(function() { alterClass(); }); //Fire it when the page first loads: alterClass();Violín: https://jsfiddle.net/r4vohqym/