我有bootstrap v3。
我class="active"在navbar菜单上使用时,它不会切换。我知道该如何使用jQuery并建立点击功能,但我认为该功能应包含在引导程序中?那么也许是JavaScript问题?
class="active"
navbar
jQuery
这是我包含的js / css / bootstrap文件的标头:
<!-- Bootstrap CSS --> <link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <link rel="stylesheet" href= "/stylesheets/styles.css" /> <!--jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <!-- Bootstrap JS --> <script src="/bootstrap/js/bootstrap.min.js"></script> <script src="/bootstrap/js/bootstrap-collapse.js"></script> <script src="/bootstrap/js/bootstrap-transition.js"></script>
这是我的navbar代码:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/index.php">MyBrand</a> </div> <div class="collapse navbar-collapse navbarCollapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"> <a href="/index.php">Home</a> </li> <li> <a href="/index2.php"> Links</a> </li> <li> <a href="/history.php">About</a> </li> <li> <a href="/contact.php">Contact</a> </li> <li> <a href="/login.php">Login</a> </li> </ul> </div> </div> </nav>
我可以正确设置吗?
(在不相关的注释上,但可能相关吗?当菜单移动时,我单击菜单按钮,它将折叠。尽管再次按下并不会使其崩溃。因此,此问题与另一个都表示错误的JavaScript设置也许?)
您已经包括了缩小的Bootstrap js文件和合拢/转换插件,而文档指出:
bootstrap.js和bootstrap.min.js都将所有插件包含在一个文件中。 仅包括一个。
和
为了获得简单的过渡效果,请在其他JS文件旁边添加一次transition.js。如果您使用的是已编译(或精简)的bootstrap.js,则无需包含此文件- 它已经存在。
因此,这可能是最小化问题的问题。
对于活动的班级,您必须自己进行管理,但这只是一两行。
引导程序3:
$(".nav a").on("click", function(){ $(".nav").find(".active").removeClass("active"); $(this).parent().addClass("active"); });
引导程序4:
$(".nav .nav-link").on("click", function(){ $(".nav").find(".active").removeClass("active"); $(this).addClass("active"); });