滑动下划线边框以使用活动网页

Sliding underline border to work with the active web page

本文关键字：活动 网页 下划线 边框      更新时间：2023-09-26

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

我正在使用这个java脚本来获取当前页面。

我的导航栏是这样设置的。这是李类"二"的特定代码，它将被突出显示。

  <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中使用.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;
}

您可以执行以下操作。我添加了一个点击事件，以保持点击项目下方的边框。如果你不想这样的行为，你可以直接做$("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>

相关文章：