Bootstrap 活动菜单栏颜色答案

【问题标题】：Bootstrap active menu bar colorBootstrap 活动菜单栏颜色
【发布时间】：2016-07-07 21:00:58
【问题描述】：

我目前正在使用引导程序制作网站。我在顶部有一个菜单栏，当网站的部分在时，我想更改特定菜单栏的颜色或背景颜色。例如，菜单之一是调用，主页中有一个部分打电话约。当这个人在网页的“关于”部分时，我希望菜单“关于”会变成不同的颜色背景。

我使用 data-spy(scroll) 和 data-target(my-navbar) 来检查它是否工作，但它没有工作。无论如何我可以解决这个问题吗？

附：这是我使用它的导航栏部分和身体部分。谢谢！

<!DOCTYPE html>
<html lang="en">

 <head>
	<meta charset="utf-8">
	<title>Provision Health & Wellness</title>
	<meta name="description" content="ProvisionHW">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
 </head>

 	<style>
 	body {
 		padding-top: 40;
 	}

 	h2 {
 		text-align: center;
 	}

 	</style>
 	

 <body data-spy="scroll" data-target="#my-navbar">

 	<!-- Navbar -->
 	 <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
 	 	<div class="container">
 	 		<div class="navbar-header">
 	 			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
 	 				<span class="icon-bar"></span>
 	 				<span class="icon-bar"></span>
 	 				<span class="icon-bar"></span>
 	 				<span class="icon-bar"></span>
 	 			</button>

 	 			<a href="" class="navbar-brand">Provision Health&Wellness</a>
 	 		</div> <!-- Navbar Header-->

 	 		<div class="collapse navbar-collapse" id="navbar-collapse">
 	 			<ul class="nav navbar-nav">
 	 				<li><a href="#health_product">Health Product</a></li>
 	 				<li><a href="#blog">Blog</a></li>
 	 				<li><a href="#slim_product">Slim Product</a></li>
 	 				<li><a href="#video">Video</a></li>
 	 				<li><a href="#skin_product">Skin Product</a></li>
 	 				<li><a href="#contact_us">Contact us</a></li>
 	 			</ul>
 	 		</div>
 	 	</div> <!-- End Container-->
 	 </nav> <!-- End navbar-->

【问题讨论】：

您尚未关闭列表标签<li><a href="#health_product">Health Product</a>，您的示例按预期工作。发布一个显示问题的最小工作示例。见minimal reproducible example。
您是否在导航栏或导航栏的元素上尝试了一些自定义 CSS 代码？
我修好了一个，但还是不行。我没有在导航栏上自定义 CSS 代码。我已经更新了我的代码！
您使用的是 Wordpress，还是任何其他类型的 CSS，可能会根据您所在的页面向 <body> 添加不同的类？
我没有使用 Wordpress，我只使用引导程序。我正在从头开始制作一个网站。我没有制作单独的 css 文件，但我将样式代码放在标题部分的下方。我更新了上面的代码，所以它应该显示样式代码。

标签： html twitter-bootstrap

【解决方案1】：

这是正在工作的小提琴。

https://jsfiddle.net/5e1n0nhw/1/

这是跟踪活动部分的 jQuery

$(function() {
$('a.page-scroll').bind('click', function(e) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }
    , 1500, 'easeInOutExpo' //add/remove for smooth scroll
    );
    e.preventDefault();
});
});

不要忘记包含 jQuery 缓动。

将 page-top 的 id 添加到您的 body 元素和 href page-top 到您的徽标，以便您可以在点击时滚动到顶部。

在要引导到部分的所有元素上添加类页面滚动。

将所有部分包装在部分标签中。

现在您可以使用 css 设置活动链接的样式

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
color:green;
}

【讨论】：

哪一部分你不明白？
所以我应该为我的实际部分或导航栏更改页面顶部的 id？
您只需在正文标签中添加页面顶部的 id 或其他任何内容。比在 logo 元素中添加与 body id 同名的 href 。但是，如果您不想链接页面顶部，则无需这样做。看看我发布的小提琴。你范复制它，它会工作。只需包括缓动...
我将 javascript 和 css 添加到我的 html 代码中。但它无法以某种方式工作。但它在小提琴中效果很好。我不知道为什么。
你是否加入了缓动？如果是，请使用您的确切代码制作新的小提琴，否则包括缓动:-)

【解决方案2】：

使用这个很棒的工具，它可以自定义您的导航栏颜色并为您提供所需的 css。

http://work.smarchal.com/twbscolor/

【讨论】：