CODEWITHSUNDEEP
htmlmaterialize
Nonsense
Nonsense

Reputation: 290

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>

Upvotes: 2

Views: 2923

Answers (1)

kevinniel
kevinniel

Reputation: 1106

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>

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>

Upvotes: 3

Related Questions