How to add a class to an HTML element with PHP?

Asked

Viewed 842 times

1

I created a side menu using text widget in wordpress

<ul style="list-style:none">
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/andre-gambier-campos/">André Gambier Campos</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/eduardo-luiz-cury/">Eduardo Luiz Cury</li>   </a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/fabio-tatei/">Fábio Tatei</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/franco-de-matos/">Franco de Matos</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/genaro-aguilar-gutierrez/">Genaro Aguilar Gutierrez</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/marcos-antonio-favaro-martins/">Marcos Antônio Fávaro Martins</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/maria-cristina-cacciamali/">Maria Cristina Cacciamali</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/maria-de-fatima-jose-silva/">Maria de Fátima José-Silva</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/natalia-nunes-ferreira-batista/">Natalia Nunes Ferreira Batista</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/rosana-aparecida-ribeiro/">Rosana Aparecida Ribeiro</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/tania-de-toledo-lima/">Tânia de Toledo Lima</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/thais-virga-passos/">Thaís Virga Passos</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/umberto-celli-junior/">Umberto Celli Junior</li></a>

inserir a descrição da imagem aqui

What I wanted was for clicking on the name to be added an "active" class in the link, to show the user where it is, the same way it works in the horizontal menu:

inserir a descrição da imagem aqui

I tried to do so 

<li <?php if($verifica['André Gambier Campos']==true) echo "class='active'" ?> 
<a href="http://www.nespi.com.br/pesquisadores/andre-gambier-campos/">Início</a>
 </li>

But it doesn’t work.

php wordpress

  • I recommend: http://www.paulund.co.uk/use-jquery-to-highlight-active-menu-item

  • 1

    What’s in your variable $verifica?

  • You can also refresh the page with the class included.

1 answer

2


My example, WORKS, makes an active menu item based on the current URL with jQuery:

Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function($){
        // Get current url
        // Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
        var url = window.location.href;
        $('.menu a[href="'+url+'"]').addClass('current_page_item');
    });
</script>

Style:

<style type="text/css">
a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:AUTO;
    float:left;
}


</style>

HTML

<header>
<div class="menu">
    <ul class="nav">
        <li><a href="#">INÍCIO</a>
        </li>
        <li>|</li>
        <li><a href="#">MISSÃO</a>
        </li>
        <li>|</li>
        <li><a href="#">QUEM SOMOS</a>
        </li>
        <li>|</li>
        <li><a href="#">PESQUISADORES</a>
        </li>
    </ul>
</div>    
</header>

Browser other questions tagged php wordpress

You are not signed in. Login or sign up in order to post.