Untitled

//faq.js
$(window).on('load', function() {

    // code here
    $('div.faq a img').click(function(){
         $('a img').removeClass("ativo");
         $(this).addClass("ativo");
    });
 });


// main.handlebars

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>wifianywhere - Tenha wifi em qualquer lugar</title>
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/media.css">
    <link rel="stylesheet" href="/bower_components/Font-Awesome/css/all.css">
    <link rel="stylesheet" href="/bower_components/flag-icon-css/css/flag-icon.css">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="/bower_components/datatables.net-dt/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="/bower_components/datatables.net-responsive-dt/css/responsive.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="/bower_components/datatables.net-select-dt/css/select.dataTables.min.css">
<!--    <link rel="icon" href="/a.png">-->

</head>
<body>

    {{>_navbars}}

    {{{body}}}

    {{>_footer}}

    {{>_login}}

    {{>_chat}}

    <script src="/bower_components/jquery/dist/jquery.js"></script><!--
    <script src="/bower_components/popper.js/dist/popper.js"></script>-->
    <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/js/site.js"></script>
    <script src="/js/faq.js"></script>
    <script src="/js/dash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
    <script src="/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
    {{!-- <script src="/bower_components/datatables.net-responsive-dt/js/responsive.dataTables.min.js"></script> --}}
    <script src="/bower_components/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="/bower_components/datatables.net-select/js/dataTables.select.min.js"></script>
</body>
</html>


//faq.handlebars ou esta a tag que recebe o ativo
<div class="container-fluid p-0" id="faq">
    <img src="/images/Imagem 2.png" class="img-fluid banner" alt="Responsive image">
    <div class="centered h5 font-weight-bold">
        <span>{{translation.FAKQ}}</span>
        <form action="/faq/pesquisa" method="POST">
            <input type="text" placeholder="Type your question..." name="search">
        </form>
    </div>
</div>


<section id="categoria"  class="container-fluid">
    <div class="row">
        <div class="col-md-2 col-sm-4">
            <div class="row text-center mt-4 faq">
                <div class="col-12">
                    <a class="general" href="/faq/{{Catego.0.id}}">
                        <img class="ativo" src="/images/General.svg">
                    </a>

                </div>
            </div>
            <div class="row">
                <div class="col-12 mt-4"><h6 class="text-center font-weight-bold ativo" >{{Catego.0.nomept}}</h6></div>
            </div>
        </div>
        <div class="col-md-2 col-sm-4">
            <div class="row text-center mt-4 faq">
                <div class="col-12">
                    <a href="/faq/{{Catego.1.id}}">
                        <img class="" src="/images/Usage.svg">
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-12 mt-4"><h6 class="text-center font-weight-bold" >{{Catego.1.nomept}}</h6></div>
            </div>
        </div>
        <div class="col-md-2 col-sm-4 faq">
            <div class="row text-center mt-4">
                <div class="col-12">
                    <a href="/faq/{{Catego.2.id}}">
                        <img class="" src="/images/Booking%20and%20Payment.svg">
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-12 mt-4"><h6 class="text-center font-weight-bold" >{{Catego.2.nomept}}</h6></div>
            </div>
        </div>
        <div class="col-md-2 col-sm-4 faq">
            <div class="row text-center mt-4">
                <div class="col-12">
                    <a href="/faq/4">
                        <img class="" src="/images/Pickup%20or%20shipping.svg">
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-12 mt-4"><h6 class="text-center font-weight-bold">{{translation.P_SHIPPING}}</h6></div>
            </div>
        </div>
        <div class="col-md-2 col-sm-4 faq">
            <div class="row text-center mt-4">
                <div class="col-12">
                    <a href="/faq/5">
                        <img class="" src="/images/Return.svg">
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-12 mt-4"><h6 class="text-center font-weight-bold">{{translation.RETURN}}</h6></div>
            </div>

        </div>
        <div class="col-md-2 col-sm-4 faq">
            <div class="row text-center mt-4">
                <div class="col-12">
                    <a href="/faq/6">
                        <img class="" src="/images/Modification%20and%20Cancellation.svg">
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-12 mt-4"><h6 class="text-center font-weight-bold">{{translation.MOD_CAN}}</h6></div>
            </div>
        </div>
    </div>
</section>

</section>