CODEWITHSUNDEEP
phpsmarty
Carlos Sanchez
Carlos Sanchez

Reputation: 35

How to assign class="active" to menu in Smarty

I want that when i click on any link the link clicked gets the class="active" , 

<div style="width: 180px;">     
    <ul class="nav nav-list well">
      <li class="active"><a href="#"><i class="icon-user"></i> Clientes</a></li>
      <li><a href="#"><i class="icon-user"></i> Clientes Potenciales</a></li>
      <li><a href="#"><i class="icon-user"></i> Suplidores</a></li>
      <li><a href="#"><i class="icon-user"></i> Partners</a></li>
      <li><a href="#"><i class="icon-user"></i> Contactos</a></li>
    </ul>
</div>

I tried doing it like this:

        <li class="{if {$smarty.server.REQUEST_URI} == 'clientes'}active{/if}"><a href="#"><i class="icon-user"></i> Clientes</a></li>
        <li class="{if {$smarty.server.REQUEST_URI} == 'clientes2'}active{/if}"><a href="#"><i class="icon-user"></i> Clientes2</a></li>

But no luck, its not working, can anyone help me out ? im trying to do this with Smarty

Upvotes: 0

Views: 1516

Answers (1)

Dave Chen
Dave Chen

Reputation: 10975

You need to use javascript:

<div style="width: 180px;">     
    <ul class="nav nav-list well">
      <li id="li_0" class="active"><a href="#"><i class="icon-user"></i> Clientes</a></li>
      <li id="li_1"><a href="#"><i class="icon-user"></i> Clientes Potenciales</a></li>
      <li id="li_2"><a href="#"><i class="icon-user"></i> Suplidores</a></li>
      <li id="li_3"><a href="#"><i class="icon-user"></i> Partners</a></li>
      <li id="li_4"><a href="#"><i class="icon-user"></i> Contactos</a></li>
    </ul>
</div>
<script>
    var listItems=4;

    for (var i=0;i<listItems;i++) {
        document.getElementById("li_"+i).onclick=function() {
            resetClasses();
            this.className="active";
        }
    }

    function resetClasses() {
        for (var i=0;i<listItems;i++) {
            document.getElementById("li_"+i).className="";
        }
    }
</script>

Upvotes: 1

Related Questions