Question

让我们说，为简化起见，我有以下基本页面结构：

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="scripts/scroll.js"></script>
  <script src="scripts/highlight.js"></script>
</head>

<body>

<div id="container">
  <div id="descriptions">
    <p>
      Description 1 Content<sup><a href="#ref1"> 1</a></sup>
    </p>
    <p>
      Description 2 Content<sup><a href="#ref2"> 2</a></sup>
    </p>
    <p>
      Description 3 Content<sup><a href="#ref3"> 3</a></sup>
    </p>
    ...
    ...
    ...
    <p>
      Description 10 Content<sup><a href="#ref10"> 10</a></sup>
    </p>
    <p>
      Description 11 Content<sup><a href="#ref11"> 11</a></sup>
    </p>
  </div>

  <div id="references">
    <div id="ref1">
      Reference 1 Content
    </div>
    <div id="ref2">
      Reference 2 Content
    </div>
    <div id="ref3">
      Reference 3 Content
    </div>
    ...
    ...
    ...
    <div id="ref10">
      Reference 10 Content
    </div>
    <div id="ref11">
      Reference 11 Content
    </div>
  </div>
</div>

</body>

我已经完成了CSS的完美突出，但是当实现一个平滑滚动到“refs”的脚本时：

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 600);
        return false;
      }
    }
  });
});

它以某种方式覆盖了CSS突出显示。即使添加！重要的CSS也无济于事。滚动效果很好，只是突出显示现在已经消失了。

关于我做错的任何想法？

编辑：这是我以前的语法：

<div id="references">
    <p id="ref1">
      Reference 1 Content
    </p>
    <p id="ref2">
      Reference 2 Content
    </p>
    <p id="ref3">
      Reference 3 Content
    </p>
    ...
    ...
    ...
    <p id="ref10">
      Reference 10 Content
    </p>
    <p id="ref11">
      Reference 11 Content
    </p>
  </div>

以下CSS用于突出显示：

div.references p:target {
    background-color: #FDD;
}

无论如何，突出显示在实施上述javascript后停止工作。

脚本突出显示元素<div> on superscript href click？</div>

0 个答案: