rails javascript jquery：通过页面部分时导航栏标题中的粗体效果

Question

我有一个由 6 个不同部分组成的网页，以及一个带有每个部分标题的固定导航栏。滚动页面时，用户会看到一个部分，然后是下一个部分，依此类推。

我想这样当用户浏览一个部分时，导航栏中的相关标题会变为粗体，就像在这个网站中它改变颜色一样：http://www.psychologue-paris16.com/

有人知道怎么做吗？

这是我的导航栏：

<nav class="navbar navbar-expand-lg navbar-light text-black fixed-top">
  <a class="navbar-brand" href=""><strong>Hélène Levy-Borrel</strong></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarColor03">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link scrollLink" href="#therapy">Title 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link scrollLink" href="#consult">Title 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link scrollLink" href="#modalities">Title 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link scrollLink" href="#method">Title 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link scrollLink" href="#background">Title 5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link scrollLink" href="#contact">Title 6</a>
      </li>
    </ul>
  </div>
</nav>

还有我的主页：

<%= render 'jumbotron' %>

<div class="content">
  <%= render 'Section 1' %>
  <%= render 'Section 2' %>
  <%= render 'Section 3' %>
  <%= render 'Section 4' %>
  <%= render 'Section 5' %>
  <%= render 'Section 6' %>
</div>

Answer 1

这确实使用 jquery，但它几乎在所有情况下都能快速且良好地运行。

我的 sorttable.js ：

var asc = 0;
function sort_table(table, col) {
    $('.sortorder').remove();
    if (asc == 2) { asc = -1; } else { asc = 2; }
    var rows = table.tBodies[0].rows;
    var rlen = rows.length;
    if (!table.tHead) { rlen--; }
    var arr = new Array();
    var i, j, cells, clen;
    // fill the array with values from the table
    // does not like empty rows, so check your haml!
    for (i = 0; i < rlen; i++) {
        cells = rows[i].cells;
        clen = cells.length;
        arr[i] = new Array();
        for (j = 0; j < clen; j++) { arr[i][j] = cells[j].innerHTML; }
    }
    // sort the array by the specified column number (col) and order (asc)
    arr.sort(function (a, b) {
        var retval = 0;
        var col1 = a[col].toLowerCase().replace(',', '').replace('$', '').replace(' usd', '')
        var col2 = b[col].toLowerCase().replace(',', '').replace('$', '').replace(' usd', '')
        var fA = parseFloat(col1);
        var fB = parseFloat(col2);
        if (col1 != col2) {
            if ((fA == col1) && (fB == col2)) { retval = (fA > fB) ? asc : -1 * asc; } //numerical
            else { retval = (col1 > col2) ? asc : -1 * asc; }
        }
        return retval;
    });
    for (var rowidx = 0; rowidx < rlen; rowidx++) {
        for (var colidx = 0; colidx < arr[rowidx].length; colidx++) { table.tBodies[0].rows[rowidx].cells[colidx].innerHTML = arr[rowidx][colidx]; }
    }

    hdr = table.rows[0].cells[col];
    if (hdr.children.length == 0) {
        obj = hdr
    } else {
        obj = hdr.children[0]
    }
    if (asc == -1) {
        // $(hdr).html($(hdr).html() + '<span class="sortorder">▲</span>');
        $(obj).html($(obj).html() + '<span class="sortorder">▲</span>');
    } else {
        //$(hdr).html($(hdr).html() + '<span class="sortorder">▼</span>');
        $(obj).html($(obj).html() + '<span class="sortorder">▼</span>');
    }
}

在 html 视图中：

= javascript_include_tag "sorttable"
:javascript
  function sortTable(n) {
    sort_table(document.getElementById("indextable"), n);
  }
%table.table.table-striped.table-bordered.table-hover.table-sm#indextable
  %thead
    %tr
      %th Select
      %th{onclick: "sortTable(1)"} Sample
      %th{onclick: "sortTable(2)"} Method
      %th{onclick: "sortTable(3)"} Compound
      %th Chart
  %tbody
    <your contents here>