I am new to scripting and looking for assistance with swapping li's in ul. Here are the scenarios: 1. When a user clicks on an anchor tag, the active item should move to the center position. 2. The list may not be in order and could be arranged in any way.
var swapElements = function(siblings, subjectIndex, objectIndex) {
// Get jQuery of the subject
var subject = $(siblings.get(subjectIndex));
// Get the object element
var object = siblings.get(objectIndex);
// Insert the subject after the object
subject.insertAfter(object);
}
$(function() {
swapElements($('li'), 0, 1);
});ul li {
float: left;
display: inline-block;
list-style: none;
}
ul li a {
color: #000;
text-decoration: none;
padding: 15px;
display: block;
}
ul li.active a {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="nav-item" href="#"><span>Quality</span></a></li>
<li><a class="nav-item" href="#"><span>Safety</span></a></li>
<li class="active"><a class="nav-item" href="#"><span>People</span></a></li>
<li><a class="nav-item" href="#"><span>Cost</span></a></li>
<li><a class="nav-item" href="#"><span>Delivery</span></a></li>
</ul>I have attempted to modify the code without success. Can someone please help me solve this issue? Thank you in advance.