Twitter Bootstrap Question posted in

Laravel Blade Changing Active Class Bootstrap – Twitter bootstrap

How will I change the active class in twitter bootstrap when i visit another page with Laravel Blade Templating ?

Tags:

2

Answers


  1. 0

    here is an example this might can help

    You could define a variable in your blade template

     <?php $nav_profile = 'active'; ?>

    @extends ('layouts.app')

    @section ('content')
..
..
    @endsection

    And then in the layouts file;

    <ul class="nav nav-tabs">
    <li role="presentation" class="{{ $nav_home or ''  }}"><a href="#">Home</a></li>
     <li role="presentation" class="{{ $nav_profile or ''  }}"><a href="#">Profile</a></li>
     <li role="presentation" class="{{ $nav_messages or '' }}"><a href="#">Messages</a></li>
</ul>

    So, if the page includes a variable called nav_profile then insert ‘active’ into the class. The ‘or ‘part inserts an empty string if the variable is not present.

    Login or Signup to reply.
  2. 0

    I have found a simple solution for this problem. This solution has very simple trick.

    And it will work for all links throughout the page.

    <script>
  function addActiveClass(){
    var objs = document.getElementsByTagName('a');          // take all 'a' tags
    for(var i = 0; i < objs.length; i++){
      if(objs[i].href == window.location.href){             // check if the user is on this link
        objs[i].className = objs[i].className + " active";  // add additional 'active' class
      }
    }
  }

  addActiveClass();
</script>

    Adding this code to the end of your page will do the magic.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search