Question

我有一个<nav>元素。在<nav>元素内部，我有链接（就像你一样）。我有一些javascript，当点击它时，通过其class属性更改哪个链接是当前页面。我希望链接元素在具有当前页面类时被提升到导航栏的顶部。例如：

<nav>
  <a>Link 1</a>
  <a class="currentpage">Link 2</a>
</nav>

为了帮助概念化事物，此导航器当前显示为简单的链接列表，而不是页面顶部的条形图。我只想让Link 2出现在列表的顶部，当它的类是＆＃34; currentpage＆＃34;

Answer 1

您可以使用Flexbox并使用js更改order。

$('nav a').click(function(e) {
  e.preventDefault();
  $(this).addClass('currentpage').siblings().removeClass('currentpage');
})

nav {
  display: flex;
  flex-direction: column;
}
.currentpage {
  order: -1;
  font-size: 30px;
}
a {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#" class="currentpage">Link 3</a>
</nav>

Answer 2

我在jsfiddle创建了一个示例，我测试了它，它可以正常工作

$('.nav a').on('click',function(){
  $(this).parent().children('a').removeClass();
  $(this).addClass('currentpage');
  console.log($(this))
  console.log($(this).parent().children('a').eq(0))
  $(this).insertBefore($(this).parent().children('a').eq(0));
})

在本例中，我使用jquery 1.9

步骤如下：

我删除了a中所有现有的当前页面，如果有一些未正确删除。
我将当前页面类添加到您刚刚点击的那个。
我将您点击的那个移动到导航

在块元素内移动内联元素

2 个答案: