Question

我是脚本新手。有人可以帮我换掉ul的li 工作场景是： 1.当用户点击锚标签时，它应该是中间意味着活动位置（活动项应该始终位于中心位置）。 2.列表可能不是按任何顺序排列。

var swapElements = function(siblings, subjectIndex, objectIndex) {
  // Get subject jQuery
  var subject = $(siblings.get(subjectIndex));
  // Get object element
  var object = siblings.get(objectIndex);
  // Insert subject after 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>

我试图更改代码但没有运气..任何人都可以帮助我解决我的问题。提前谢谢..

Answer 1

请考虑以下代码，并提供注释以供解释。如果你有什么不明白的地方请评论。

value

	$(document).ready(function() {
		function change() {

			// 1. remove active class from currently active component
			$('.active').removeClass('active');

			// 2. get html inside of the list element
			var htm = $(this).html();

			// 3. remove the list element
			$(this).remove();

			// 4. add a new list element after the 2nd child or (n /2)th child
			$('li:nth-child(2)').after('<li class="active">' + htm + '</li>');

			// 5. bind the change method to clicking of this new element
			$('li:nth-child(3)').click(change);
		}

		// when a list element is clicked, call the change function
		$('li').click(change);

	});

    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;
    }

ul中的交换列表和活动项目位置保持不变

1 个答案: