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

Posted 2023-05-09

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

【英文标题】：rails javascript jquery: bold effect in navbar title when passing over a page section

【发布时间】：2021-04-04 00:28:43

【问题描述】：

我有一个由 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>

【问题讨论】：

你在***上找过类似的问题吗？ ***.com/questions/16625972/… ...我假设您正在使用引导程序，但这应该可以工作

我有，但不是我要找的。悬停在链接上时我不想更改颜色，我想在悬停与链接相关的部分时更改颜色并使链接变为粗体。我希望我说的是有道理的:-)

我可以想办法在 javascript 中做到这一点，但在纯 CSS 中不行，您需要纯 CSS 版本吗？

完全没有，如果您有任何想法，JavaScript 也可以工作

【参考方案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
      %thonclick: "sortTable(1)" Sample
      %thonclick: "sortTable(2)" Method
      %thonclick: "sortTable(3)" Compound
      %th Chart
  %tbody
    <your contents here>