Question

我在网页上遇到ScrollSpy问题。我试图将类文件指示器放到正确的位置，但它们仍未显示。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Unix Command Crib Sheet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="command-crib-sheet.css" rel="stylesheet">
  </head>
  <body data-spy="scroll" data-target=".thingy">
    <div class="navbar-fixed-top">
        <h2>Unix Command Crib Sheet</h2>
    </div>
    <div class="container">
      <div class="col-md-3">
        <div id="centered-nav" class="bs-sidebar hidden-print affix">
          <nav id="thingy" class="nav bs-sidenav">
            <li>
            ...

Answer 1

是的，只需添加一个类'thingy'即可 <div class="container thingy">

添加新的css以突出显示文本（相应地更改样式）

li.active a {
        color: red;
    }

最后将此脚本添加到页面

<script type="text/javascript">
    $('body').scrollspy({
        target: '.thingy'
    });
</script>

最后但并非最不重要的是我已将<nav>更改为<ul>

<nav id="thingy" class="nav bs-sidenav">

到

<ul id="thingy" class="nav bs-sidenav">

就是这样......！

Scrollspy突出显示在Bootstrap 3中不起作用

1 个答案: