Bootstrap nav的背景颜色在激活时不会改变？
[英]Bootstrap nav's background-color not changing when active?
问题描述
大家好，当我点击我的bootstrap的导航栏时，背景颜色（我的导航栏）没有根据我的css代码改变。 请帮忙！
carousel.js / carousel.css和login.html
$(document).ready(function () { $('#mainCarousel').carousel({ interval: 4000 }); var clickEvent = false; $('#mainCarousel').on('click', '.nav a', function () { clickEvent = true; $('.nav li').removeClass('active'); $(this).parent().addClass('active'); }).on('slid.bs.carousel', function (e) { if (!clickEvent) { var count = $('#indexmenu').children().length - 1; var current = $('#indexmenu li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.next().data('slide-to')); if (isNaN(id)) { $('#indexmenu li').first().addClass('active'); } } clickEvent = false; }); });
body { padding-top: 20px; } #myCarousel .nav a small { display: block; } #myCarousel .nav { background: #eee; } .nav-justified > li > a { border-radius: 0px; } .nav-pills>li[data-slide-to="0"].active a { background-color: #16a085; } .nav-pills>li[data-slide-to="1"].active a { background-color: #e67e22; } .nav-pills>li[data-slide-to="2"].active a { background-color: #2980b9; } .nav-pills>li[data-slide-to="3"].active a { background-color: #8e44ad; }
<!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="carousel.css"> <script src="carousel.js"></script> </head> <body> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/e67e22/ffffff&text=Projects"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/2980b9/ffffff&text=Portfolio"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/8e44ad/ffffff&text=Services"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> <ul class="nav nav-pills nav-justified"> <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li> </ul> </div> <!-- End Carousel --> </div> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>
我认为错误是在css代码中，但请告诉我！ 干杯
1 个解决方案
解决方案1
3 已采纳 2015-05-12 04:46:59
主容器的ID是myCarousel而不是mainCarousel
采用
$('#myCarousel').on('click', '.nav a', function () {..});
$(document).ready(function () { $('#myCarousel').carousel({ interval: 4000 }); var clickEvent = false; $('#myCarousel').on('click', '.nav a', function () { clickEvent = true; $('.nav li').removeClass('active'); $(this).parent().addClass('active'); }).on('slid.bs.carousel', function (e) { if (!clickEvent) { var count = $('#indexmenu').children().length - 1; var current = $('#indexmenu li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.next().data('slide-to')); if (isNaN(id)) { $('#indexmenu li').first().addClass('active'); } } clickEvent = false; }); });
body { padding-top: 20px; } #myCarousel .nav a small { display: block; } #myCarousel .nav { background: #eee; } .nav-justified > li > a { border-radius: 0px; } .nav-pills>li[data-slide-to="0"].active a { background-color: #16a085; } .nav-pills>li[data-slide-to="1"].active a { background-color: #e67e22; } .nav-pills>li[data-slide-to="2"].active a { background-color: #2980b9; } .nav-pills>li[data-slide-to="3"].active a { background-color: #8e44ad; }
<!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="carousel.css"> <script src="carousel.js"></script> </head> <body> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/e67e22/ffffff&text=Projects"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/2980b9/ffffff&text=Portfolio"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/8e44ad/ffffff&text=Services"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> <ul class="nav nav-pills nav-justified"> <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li> </ul> </div> <!-- End Carousel --> </div> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>
突出显示活动的导航菜单，background-color：#fff有效，而color：#fff不起作用？
[英]Highlight active nav menu, background-color:#fff works and color:#fff dont works?
更改html select的背景颜色时，第一个选项随之更改
[英]When changing background-color of html select, first option changes with it
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.