[英]How to change the active state of a navbar link in a materialize
How to change the activity of the link state, depending on which one was clicked.Simply at the moment, only the home one is active all the time, and I do not know how to implement a change of lines between links. 如何更改链接状态的活动,具体取决于单击哪个链接。目前,仅主页活动一直处于活动状态,我不知道如何实现链接之间的线路更改。
<nav class="white z-depth-0">
<div class="container">
<div class="nav-wrapper">
<a class="brand-logo black-text"><img src="/assets/images/logo.png"></a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons black-text">menu</i></a>
<ul class="right hide-on-med-and-down">
<li class="active"><a class="black-text" routerLink="/home">Home</a></li>
<li><a class="black-text" routerLink="/services">Services</a></li>
<li><a class="black-text" routerLink="/contacts">COntacts</a></li>
</ul>
</div>
</div>
</nav>
<ul class="side-nav" id="mobile-demo">
<li><a class="black-text" routerLink="/home">Home</a></li>
<li><a class="black-text" routerLink="/services">Services</a></li>
<li><a class="black-text" routerLink="/contacts">COntacts</a></li>
</ul>
All is in the below line : 全部在下面的行中:
<li class="active"><a class="black-text" routerLink="/home">Home</a></li>
Toggle the class "active" to the current <li>
将“活动”类切换到当前
<li>
full code : 完整代码:
<style type="text/css">
.active {background-color: #F0F;}
</style>
<nav class="white z-depth-0">
<div class="container">
<div class="nav-wrapper">
<a class="brand-logo black-text"><img src="/assets/images/logo.png"></a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons black-text">menu</i></a>
<ul class="right hide-on-med-and-down">
<li class="active"><a class="black-text" routerLink="/home">Home</a></li>
<li><a class="black-text" routerLink="/services">Services</a></li>
<li><a class="black-text" routerLink="/contacts">COntacts</a></li>
</ul>
</div>
</div>
</nav>
<ul class="side-nav" id="mobile-demo">
<li><a class="black-text" routerLink="/home">Home</a></li>
<li><a class="black-text" routerLink="/services">Services</a></li>
<li><a class="black-text" routerLink="/contacts">COntacts</a></li>
</ul>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul.right li').on('click', function(){
var clicked = $(this);
$('ul.right li').each(function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
}
});
$(this).addClass('active');
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.