javascript - 如何在页面重新加载时设置事件链接？

Question

我想在页面重新加载时添加事件链接，但我不知道如何执行此操作。事实是，当我基于 bootstrap 4 放置 active 时，事件链接不起作用。我尝试了很多东西，但我真的不知道如何与这个 jquery 插件交互。请帮助我。

我不知道如何在现有代码上实现这一点。

HTML

 <ul id="myNav" class="nav mt-7 mb-5">
   <li class="nav-item">
     <a class="nav-link active chiffres" href="tgn.php">01</a>
   </li>
   <li class="nav-item">
     <a class="nav-link chiffres" href="oprah.php">02</a>
   </li>
   <li class="nav-item">
     <a class="nav-link chiffres" href="innocent.php">03</a>
   </li>
   <li class="nav-item">
     <a class="nav-link chiffres" href="reveal.php">04</a>
   </li>
   <li class="nav-item">
     <a class="nav-link chiffres" href="maison21g.php">05</a>
   </li>
 </ul>

JAVASCRIPT

 (function($){
$.fn.linkUnderlineAnim = function(options) {

    var defaults = $.extend({
        "speed"             : 300,
        "color"             : "#DB3340",
        "thickness"         : 2,
        "distance"          : 0,
        "bottom"            : 0

    }, options);

    return this.each(function() {

        var items = $("li a");
        var o = defaults;

        items.css("position", "relative")
             .css("text-decoration", "none")
             .css("padding-bottom", o.distance);

        var id = this.id;
        if (id !="") {
            // it has id, so we will use it to customize the style sheet
        }
        else {
            // it does not have id, so we generate a unique one to 
 customize the style sheet
            this.id = '_' + new Date().getTime(); // it is important to 
 prefix the id with any character, because only numbers not working in 
    CSS selection
            id = this.id;
        }

        //it is not possible to access :before in JavaScript/jQuery, so 
    we add a stylesheet instead. But we used/generated the id to avoid 
   styling non selected (ul) elements
        var css = '#' + id + ' li a {position: relative; text-decoration: 
    none;}' +
            '#' + id +' li a:before {content: "";position: absolute;  
   width: 100%; height: ' + o.thickness + 'px; bottom: ' + o.bottom + 
    'px; left: 0;'+
            'background-color: ' + o.color + ';' +
            'visibility: hidden; -webkit-transform: scaleX(0); transform: 
    scaleX(0);' +
            '-webkit-transition: all ' + o.speed/1000 +'s ease-in-out 0s; 
     transition: all ' + o.speed/1000 + 's ease-in-out 0s;}' +
            '#' + id +' li a:hover:before {visibility: visible; -webkit- 
     transform: scaleX(1); transform: scaleX(1);}' + '#' + id +'li 
     a:active{background:red;}' ,

            head = document.head || document.getElementsByTagName('head') 
     [0],

            style = document.createElement('style');

        style.type = 'text/css';
        if (style.styleSheet){
          style.styleSheet.cssText = css;
        } else {
          style.appendChild(document.createTextNode(css));
        }

        head.appendChild(style);
    });

    }
    })(jQuery);

Answer 1

尝试这个解决方案，它将从您的网址获取路径并将事件类设置到其中。

$(function($) {
  let url = window.location.href;
  $('li a').each(function() {
    if (this.href === url) {
      $(this).closest('li').addClass('active');
    }
  });
});

.active {text-decoration: underline}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="myNav" class="nav mt-7 mb-5">
  <li class="nav-item">
    <a class="nav-link chiffres" href="tgn.php">01</a>
  </li>
  <li class="nav-item">
    <a class="nav-link chiffres" href="oprah.php">02</a>
  </li>
  <li class="nav-item">
    <a class="nav-link chiffres" href="innocent.php">03</a>
  </li>
  <li class="nav-item">
    <a class="nav-link chiffres" href="reveal.php">04</a>
  </li>
  <li class="nav-item">
    <a class="nav-link chiffres" href="maison21g.php">05</a>
  </li>
</ul>