Bootstrap-在導航欄上設置正確的活動類
[英]Bootstrap - Set properly active class on navbar
問題描述
這是我的base.html.twig模板，其中有一個導航欄。 我在導航欄的單擊元素上設置活動類時遇到問題。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /><link rel="stylesheet" type="text/css" href=" {{asset ('public/css/jquery.dataTables.css')}}">
<link href="{{asset ('public/css/bootstrap.min.css')}}" rel="stylesheet">
<link href= "{{asset ('public/css/starter-template.css')}}" rel="stylesheet">
<script type="text/javascript" charset="utf8" src="{{ asset ('public/js/jquery.js') }}"></script>
<script type="text/javascript" charset="utf8" src="{{ asset ('public/js/jquery.dataTables.js') }}"></script>
<script type="text/javascript" charset="utf8" src="{{ asset ('public/js/bootstrap.min.js') }}"></script>
<script type="text/javascript" charset="utf8" src="{{ asset ('public/js/myscript.js') }}"></script>
</head>
<body>
{% block body %}
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="">App</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href = "{{path('customers')}}" data-toggle="collapse" data-target="#customers">Customers</a>
</li>
<li>
<a href = "{{path('sellers')}}" data-toggle="collapse" data-target="#sellers"">Sellers</a>
</li>
<li>
<a href = "{{path('news')}}" data-toggle="collapse" data-target="#news">News</a>
</li>
<li>
<a href = "{{path('about')}}" data-toggle="collapse" data-target="#about"">About</a>
</li>
<li>
<a href = "#" data-toggle="collapse" data-target="#import">Import</a>
</li>
</ul>
</div>
</div>
</nav>
{% endblock %}
</body>
</html>
這是模板中包含的myscript.js ，我用於在navbar元素上設置active類：
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
為什么不工作？ 謝謝！
編輯
似乎是因為<a>元素中定義的路徑。 有一個沒有路徑的列表，js可以工作。 關於如何使其與路徑一起使用的任何想法嗎？
編輯2-我如何解決
謝謝大家的幫助，最后我解決了在樹枝中使用此代碼的問題：
{% set route = app.request.attributes.get('_route') %}
<ul class="nav navbar-nav">
<li {{ route == 'customers' ? 'class="active"' }}>
<a href = "{{path('customers')}}" data-toggle="collapse" data-target="#clienti">Customers</a>
</li>
<li {{ route == 'sellers' ? 'class="active"' }}>
<a href = "{{path('sellers')}}" data-toggle="collapse" data-target="#venditori">Sellers</a>
</li>
<li {{ route == 'news' ? 'class="active"' }}>
<a href = "{{path('news')}}" data-toggle="collapse" data-target="#news">News</a>
</li>
<li {{ route == 'about' ? 'class="active"' }}>
<a href = "{{path('about')}}" data-toggle="collapse" data-target="#suggerimenti">About</a>
</li>
</ul>
5 個解決方案
解決方案1
0 2017-01-31 10:36:00
試試吧 ：
$('li a').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
解決方案2
0 2017-01-31 11:52:30
嘗試這個
$(".nav").on("click","a", function(e){
e.preventDefault();
$(".nav").find(".active").removeClass("active");
$(this).closest('li').addClass("active");
});
解決方案3
0 2017-01-31 11:52:48
你可以嘗試這可能會幫助你
$(".nav li a").on("click", function(){ $(".nav").find(".active").removeAttr("class"); $(this).parent().attr("class","active"); });
解決方案4
0 2017-01-31 11:55:54
我認為最好的方法是從導航中刪除所有活動類，而僅將活動類添加到當前
jQuery('.nav li').On(click, function({
jQuery('.nav li').removeClass('active');
jQuery(this).parent().addClass('active');
});
解決方案5
0 2017-01-31 11:57:16
嘗試這個，
$(document).on("click",".nav a", function(){
$(".nav").find("li").removeClass("active");
$(this).closest("li").addClass("active");
});
我希望這能解決您的問題。
如何使用Angular JS設置bootstrap navbar活動類？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.