我是叽叽t witter的bootstrap的新手.使用导航菜单.我正在尝试将活动类设置为选定的菜单.
我的菜单是 –
我的菜单是 –
<div class="nav-collapse">
<ul class="nav">
<li id="home" class="active"><a href="~/Home/Index">Home</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">Customer</a></li>
<li><a href="#">Staff</a></li>
<li id="broker"><a href="~/Home/Broker">Broker</a></li>
<li><a href="#">Sale</a></li>
</ul>
</div>
我在google上尝试以下操作之后,我必须在菜单中的每个页面上设置活动类,
<script>
$(document).ready(function () {
$('#home').addClass('active');
});
</script>
但上面的问题是我设置默认选择的主菜单.然后它总是被选中.还有其他方法吗？,或者我可以概括和保持我的js在布局文件本身？
执行应用程序后,我的菜单看起来 –
点击其他菜单项后,我得到以下结果 –
我在Index视图和Broker视图中添加了以下脚本—
<script>
$(document).ready(function () {
$('#home').addClass('active');
});
</script>
<script>
$(document).ready(function () {
$('#broker').addClass('active');
});
</script>
分别.
解决方法
这是一个解决方法.尝试
<div class="nav-collapse">
<ul class="nav">
<li id="home" class="active"><a href="~/Home/Index">Home</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">Customer</a></li>
<li><a href="#">Staff</a></li>
<li id="demo"><a href="~/Home/demo">Broker</a></li>
<li id='sale'><a href="#">Sale</a></li>
</ul>
</div>
$(document).ready(function () {
$(".nav li").removeClass("active");//this will remove the active class from
//prevIoUsly active menu item
$('#home').addClass('active');
//for demo
//$('#demo').addClass('active');
//for sale
//$('#sale').addClass('active');
});
