如何更改bootstrap 4.1 scrollspy(移动)活动链接颜色？
要更改Bootstrap 4.1中Scrollspy（移动）活动链接的颜色，可以按照以下步骤进行操作：
- 首先，在HTML文件中引入Bootstrap的CSS文件和JavaScript文件：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script>- 在HTML文件中定义Scrollspy的容器，并设置相关属性：
<body data-spy="scroll" data-target="#navbar" data-offset="50">其中，data-spy="scroll" 表示启用Scrollspy功能，data-target="#navbar" 表示Scrollspy要监听的导航栏元素的ID，data-offset="50" 表示Scrollspy的偏移量，可以根据具体需求进行调整。
- 在导航栏中添加活动链接样式：
<nav id="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</nav>在活动链接的<a>标签中，添加 nav-link 类，表示导航链接样式。可以根据需求自定义样式，例如，可以添加自定义的CSS类来修改活动链接的颜色。
- 编写自定义CSS样式，更改活动链接的颜色：
<style>
.navbar-nav .nav-link.active {
color: red; /* 修改为需要的颜色 */
}
</style>在这个示例中，我们将活动链接的颜色修改为红色。你可以根据需要修改为任何颜色。
完成这些步骤后，活动链接在滚动页面时会自动切换为定义的颜色。请注意，这里提供的是Bootstrap 4.1版本的解决方案，不涉及其他云计算品牌商的产品。
相关·内容
在我的网页顶部，我有一个导航栏，其中有指向其中不同部分的链接： ? 当向下滚动页面时，我希望相关链接更改颜色。我该怎么做呢？
浏览 8提问于2019-03-10得票数 0
我正在使用带有bootstraps nav-pills的scrollspy，似乎无法更改活动链接的颜色或悬停颜色。我尝试了各种组合，但似乎还是想不出为什么我不能改变颜色。你知道为什么吗？
浏览 2提问于2013-08-09得票数 0
我使用的是bootstrap 4.3.1 popper 1.10.1和jquery 3.4.1但是，将data-spy="scroll“与目标结合使用并不起作用，而且我自己调用scrollSpy函数会产生错误：TypeError: $(...).scrollSpy is not a function
我尝试使用该数据属性，也尝试使用手动函数。我试着换掉bootstrap和jquery函数，加载错误，粘贴来自twitter bo
浏览 14提问于2019-08-17得票数 1
我有一个Twitter Bootstrap网站的主菜单中充满了链接。我已经将Scrollspy设置为目标菜单，并且效果很好。需要注意的是，最后一个菜单项被称为"Login“，它有一个ID，单击它会打开Twitter Modal。然而，由于模式存在于代码中，即使没有加载，它也会影响scrollspy。
浏览 0提问于2012-12-07得票数 0
回答已采纳
0回答
问题是，在上一节中，scrollspy是活动的。我想让scrollspy在这一点上不显示任何活动，并在有效锚点的下一节将出现时继续。我尝试了的解决方案，但它们在bootstrap 4中似乎不起作用，我甚至不能捕捉触发器，它应该通过执行以下操作来工作： alert('
浏览 0提问于2017-12-14得票数 0
回答已采纳
2回答
我已经使用bootstrap设置了一个页面。()我有一个附加的侧边栏导航(它工作得很好)。我也在这个导航上使用bootstrap scrollspy，导航中的所有链接都在同一个页面内(使用ancors)。一切都运行得很好(甚至添加了一个平滑滚动插件)。我只需调用此脚本来强制Scrollspy在所有内容添加到页面(我将其放在<head>中)后进行刷新。我使用如下所示的bootstrap标记和css类来实现：
<a class="pull-right pad5&q
浏览 0提问于2013-04-03得票数 5
我有一个基于twitter bootstrap的导航菜单栏，我想要将scrollspy应用于突出显示。我使用一个普通的php include将菜单包含到多个页面中。因此，我使用文件名加上书签(例如products.php#foo)链接到文件。将根据href属性进行匹配，并将活动类放在上面。这意味着如果我有一个像<a href="products.php#my-catalogue">my catalogue</a>这样的链接，那么它就不会与id匹配，<e
浏览 10提问于2012-10-05得票数 3
回答已采纳
如何正确使用AngularStrap的ScrollSpy接口来链接到当前文档中的锚点？但是，当我自己实现该功能时，我没有看到这种行为。在我的例子中，锚标记试图更新位置，而不是移动到当前文档中的某个位置。
我的AngularStrap ScrollSpy位于一个子页面上：my-site.com/#/hig。href ng-click="gotoTop()">Back to top
浏览 1提问于2014-04-19得票数 4
我已经实现了Bootstrap 3.0的scrollspy，如下所示： <ul class="nav navbar-nav">previewAddlServices"></p> </div>我是这样初始化它的：
$('.m
浏览 0提问于2014-06-11得票数 7
1回答
我有两个jQuery项目，在本地测试时工作得很好，但一旦移动到服务器上，就会遇到两个特定于浏览器的问题。如果有帮助的话，我可以把这个问题分成两个独立的问题。同样，当在本地测试时，它可以正常工作(包括在Firefox中)，但是当移动到服务器上时，功能就会中断。第二个问题是基于命中视口顶部的截面元素将固定位置的导航栏类更改为.current。我的解决方案在Firefox和Chrome上运行得很好，但在IE上就不行了。
浏览 0提问于2014-09-16得票数 0
我的a href链接活动颜色在我的页面上不起作用。我确实更改了twitter Bootstrap，如下所示。但当单击链接并折叠菜单时，不会显示该颜色。a:hover { color: #E57200 !
浏览 3提问于2014-05-26得票数 0
我使用的是Scrollspy的Jquery独立实现。我这里有一个jsfiddle的例子：。工作正常！当显示一些额外的内容并且其中一个部分被展开时，它会抛出scrollspy。尝试展开隐藏文本，然后向下滚动。由于容器div的偏移值已更改，因此在此部分到达页面顶部之前，文本2的链接将突出显示。scrollSpy的Bootstrap版本有一个“刷新”方法，当DOM中的元素被添加/更改时，可
浏览 3提问于2013-09-20得票数 2
例如，您在页面顶部有一个菜单和一个“页面”，当用户单击菜单中的链接时应显示该“页面”。但不是每次都重新加载一个新页面，所有页面都应该放在另一个页面的上方，点击链接就可以滚动到正确的位置。类似地，如果用户滚动，他看到的页面的链接应该被标记为活动的。
这些页面叫什么？我需要jQuery吗?或者我可以使用纯引导来实现这一点吗？
浏览 0提问于2018-01-25得票数 0
我改变了它的值，我看不到导航栏背景颜色有任何变化。$ grep -nr "navbar-default-bg" ..或者如何更改导航栏bg颜色？│ ├── collapse.js│ │ ├── modal.js
│ │
浏览 4提问于2014-10-16得票数 1
我正在使用joomla 3和bootstrap.min.js，我正在创建菜单，并给出特殊的类，以便改变悬停，活动，访问链接和菜单的样式。我找不到如何更改菜单的活动链接颜色。假设我有两个菜单。当我在家里的时候，它是红色的，我想改变这个颜色。我可以更改a:active和a:hover。font-weight:bold;.topmenu > li > a:hover {
color: black;
浏览 0提问于2013-05-15得票数 11
回答已采纳
1回答
大多数导航菜单链接，链接到主页上的id。因此，当我加载我的网站时，所有链接到主页上的位置的链接当前都是活动的。我在Wordpress中删除了检查脚本是否处于活动状态的脚本。我想我可以使用bootstrap scrollspy甚至这个JSFiddle 来完成这项工作
我遇到的问题是，由于导航是由Wordpress生成的，我没有能力进入并实际对第一个li元素进行“活动”编码，我如何改变上面的JSFiddle，让它做一个散
浏览 0提问于2017-02-03得票数 0
我尝试了几种方法来覆盖bootstrap3的导航片，通过CSS激活颜色，但似乎越少越好。我还尝试在相对CSS属性上使用!important，但没有成功:优先级总是越低越好。我发现的唯一方法是使用自定义的导航药丸颜色重新编译bootstrap，但我更喜欢使用CSS，这样我就可以依赖CDN了。<body data-spy="scroll">
...
浏览 3提问于2014-02-04得票数 1
我正在使用带有黑色背景的jstree，所以我想知道如何更改每个节点之间的虚线的颜色(不确定我是否正确地调用它)。使用CSS可以吗？BR Nima
浏览 1提问于2018-05-21得票数 1
我试过添加浮点数和使用一些Bootstrap类来尝试让它工作，但都无济于事。不知道我错过了什么。我想让ul或所有的项目居中。我想让它的活动链接是唯一显示的(或可能与另一个链接)，但它可以水平滚动的其他链接。我正计划使用Scrollspy，这样活跃的链接会自动更新，如果这是有区别的。不确定如何处理--任何想法都将不胜感激。
浏览 1提问于2017-04-03得票数 0
我使用megamenu作为我的bootstrap模板，它使下拉菜单的宽度达到屏幕尺寸的100%。
当我将光标移动到导航栏上的一个链接时，例如文章，下拉菜单会打开，因为它被设置为在悬停时执行此操作：如您所见，悬停时链接的颜色会变暗，也就是说，将光标放在导航栏中的链接上时但是，如果用户将光标移动到下拉菜单，菜单将保持打开状态，这很好，但链接的颜色
浏览 0提问于2015-10-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
