如何根据活动页面突出显示导航菜单项（具有 ::after 伪元素）。答案

【问题标题】：How to highlight navigation menu items(that has ::after pseudo element) according to the active page.如何根据活动页面突出显示导航菜单项（具有 ::after 伪元素）。
【发布时间】：2018-03-04 05:41:48
【问题描述】：

我有 ::after 用于导航悬停动画的伪元素。现在我需要悬停的东西根据它的活动页面停留在那里。因为我有 ::after 伪元素，所以我不能让它与 jQuery 上的 addClass 一起工作。

 <ul class="main-nav">
      <li><a href="aboutUs.html">About<div></div></a></li>
      <li><a href="services.html">Services<div></div></a></li>
      <li><a href="portfolio.html">Portfolio<div></div></a></li>
      <li><a href="career.html">Career<div></div></a></li>
      <li><a href="contact.html">Contact<div></div></a></li>
    </ul>

这里是 CSS

.main-nav{
    float: right;
    font-family: 'Open Sans';
    font-size: 87.5%;
    font-weight:700;
    color: #fff;
    position: absolute;
    right: 140px;
    user-select: none;
    transition: all .3s ease;
    z-index: 10;

}

.main-nav li{
    list-style: none;
    display: inline-block;
    padding-left: 45px;
    margin-top: 3.86%;
    line-height: 44px;
    text-align: justify;
}

.main-nav li a{
    text-decoration: none;
    color: #fff;
    padding-left: 5px;
    padding-right: 5px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
}

.main-nav li a:after{
    text-align: center;
    text-decoration: none;
    content:''; 
    display:block;
    width:0; opacity: 0; height:3px; 
    margin-top: 12px;
    background-color:#fff; 
    transform: translateX(-50%);
    transition:all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.main-nav li a:hover:after{width:100%; opacity: 1; transform: translateX(0%);}

【问题讨论】：

标签： javascript jquery html css css-selectors

【解决方案1】：

可以添加一个新的 css 类。这样的类可以在文档加载时动态添加到您感兴趣的 li 的 div 子项中：

var currwinAddr = window.location.href.split('/').pop();
$('.main-nav a').filter(function(idx, ele) {
    return ele.href.indexOf(currwinAddr) != -1;
}).find('div').addClass('myhighlight');

.main-nav {
    background-color: blue;
    float: right;
    font-family: 'Open Sans';
    font-size: 87.5%;
    font-weight: 700;
    color: #fff;
    position: absolute;
    right: 140px;
    user-select: none;
    transition: all .3s ease;
    z-index: 10;

}

.main-nav li {
    list-style: none;
    display: inline-flex; /* changed */
    padding-left: 45px;
    margin-top: 3.86%;
    line-height: 44px;
    text-align: justify;
}

.main-nav li a {
    text-decoration: none;
    color: #fff;
    padding-left: 5px;
    padding-right: 5px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.main-nav li a:after {
    text-align: center;
    text-decoration: none;
    content: '';
    display: inline-flex; /* changed */
    width: 0;
    opacity: 0;
    height: 3px;
    margin-top: 12px;
    background-color: #fff;
    transform: translateX(-50%);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.main-nav li a:hover:after {
    width: 100%;
    opacity: 1;
    transform: translateX(0%);
}

/* added */
.myhighlight {
    display: block;
    height: 3px;
    margin-top: -10px;
    background-color: #fff;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class="main-nav">
    <li><a href="aboutUs.html">About
        <div></div>
    </a></li>
    <!-- changed href in the next element for test purposes -->
    <li><a href="js">Services
        <div  class="myclass"></div>
    </a></li>
    <li><a href="portfolio.html">Portfolio
        <div></div>
    </a></li>
    <li><a href="career.html">Career
        <div></div>
    </a></li>
    <li><a href="contact.html">Contact
        <div></div>
    </a></li>
</ul>

【讨论】：