Question

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

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

我的导航栏设置如下。这是li类“两个”特定代码，可以突出显示。

  <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的值。还要注意悬停选择器上的特异性技巧，以便边框可以向后滑动。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: