javascript - 滑动下划线边框以与事件网页一起使用

Question

我试图让这个滑动边框导航栏与事件页面导航栏突出显示一起使用。我希望它的默认位置在当前事件的页面上。
http://codepen.io/rm/pen/ldhon
<script>$("a[href*='" + location.pathname + "']").addClass("current");</script>

我正在使用此 java 脚本获取当前页面。

我的导航栏是这样设置的。这是li类“two”高亮显示的具体代码。

  <div class="bar">
    <ul>
      <li class="one"><a href="WhoWeAre.html">Who we are</a></li><!--
   --><li class="two"><a class"current" href="WhatWeDo.html">What we do</a></li><!--
   --><li class="three"><a href="GetInvolved.html">Get Involved</a></li><!--
   --><li class="four"><a href="Schedule.html">Event Schedule</a></li><!--
   --><li class="five"><a href="Contact.html">Contact</a></li>
      <hr />
    </ul>
  </div>

我想在我的 css 中使用 a.current{} 但我无法让它与滑动边框一起使用。我试过将它与这些放在一起，只是使用逗号，但它不起作用。

.two:hover ~ hr, a.current {
  margin-left: 20%;
}

.three:hover ~ hr, a.current  {
  margin-left: 40%;
}

.four:hover ~ hr, a.current  {
  margin-left: 60%;
}

.five:hover ~ hr, a.current  {
  margin-left: 80%;
}

.bar hr, a.current  {
  height: 4px;
  width: 20%;
  margin: 0;
  background: rgb(248, 172, 48);
  border: none;
  transition: .3s ease-in-out;
}

Answer 1

您可以执行以下操作。我已经添加了一个点击事件来保持点击元素下方的边框。你可以做 $("a[href*='"+ location.pathname + "']").parent().addClass("current"); 如果你不想要这样行为。

请注意，/js 是代码段中 location.pathname 的值。还要注意悬停选择器的特殊技巧，以便边框可以向后滑动。

$('li').on('click', function() {
  $('.current').removeClass('current');
  $(this).addClass('current');
}).has("a[href*='" + location.pathname + "']").addClass("current");

* {
  box-sizing: border-box;
}
body {
  font: 300 100%'Helvetica Neue', Helvetica, Arial;
}
.container {
  width: 50%;
  margin: 0 auto;
}
ul li {
  display: inline;
  text-align: center;
}
a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}
.one.current ~ hr,
ul li.one:hover ~ hr {
  margin-left: 0%;
}
.two.current ~ hr,
li.two:hover ~ hr {
  margin-left: 25%;
}
.three.current ~ hr,
.three:hover ~ hr {
  margin-left: 50%;
}
hr {
  height: .25rem;
  width: 25%;
  margin: 0;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bar">
  <ul>
    <li class="one"><a href="#">Who we are</a>
    </li>
    <li class="two"><a href="#">What we do</a>
    </li>
    <li class="three"><a href="#/js">Get Involved</a>
    </li>
    <hr />
  </ul>
</div>