Event Click on Li Html

I think you have to take one thing into account. If you use AJAX you will not have access to repo1 or repo2 since the AJAX call has to be made in the scope of a [WebMethod] (static method) and this scope is outside the life cycle of the page. That is, at the time of the call to [WebMethod] the controls of your page repo1 and repo2 do not exist and therefore you can not access them.

The flow would be more like this:

Going back to your example, imagine that you want to change the text of repo1 for a data obtained from server (I'll give you an example using jQuery that makes things much easier):

[WebMethod]
protected static string MySql()
    {
        return "PHP";
    }

And in your Javascript :

$.ajax({
                        type: "GET",
                        url: "tuPagina.aspx/MySql",
                        data: '', //Parámetros a enviar al método si los tuviera
                        contentType: "application/json; charset=utf-8",
                        dataType: "json", //Tipo de datos enviados
                        success: function(response) {
//En caso de que todo vaya bien obtienes aquí la respuesta (string "PHP")
});

Anyway, seen your code, you do not need to call the server. Doing this would be worth (following with jQuery ):

$(".active").on("click",function(){
//Llamamos a la función parent para obtener el "li" anterior y ocultarlo.
	$("#repo1").parent().hide(); 
  $("#repo2").html("PHP");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active">
                        <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">
                            <i class="fa fa-truck"></i>
                            Transportistas
                        </a>
                        <ul class="collapse list-unstyled" id="homeSubmenu">
                            <li> <a href="#" id="repo1" runat="server" onclick="MySql"> <i class="glyphicon glyphicon-list"></i>Reporte 1</a></li>
                            <li> <a href="#" id="repo2" runat="server" onclick="MySql"> <i class="glyphicon glyphicon-list"></i>Reporte 2</a></li>
                            <li> <a href="#" id="repo3" runat="server" onclick="MySql"> <i class="glyphicon glyphicon-list"></i>Reporte 3</a></li>
                        </ul>
                    </li>