jQuery addClass example

Change class name on click in jQuery

HTML

<div id="conteudo">
            <div id="links">
                <ul>
                <li class="Tela01" onclick="mostraInformacao('tela1')" onclick="">
                    <img width="50" height="50" src="https://cdn.iconscout.com/icon/premium/png-256-thumb/play-button-88-724077.png">
                    <p>tela 01</p>
                </li>
                <li class="Tela02" onclick="mostraInformacao('tela2')">
                    <img width="50" height="50" src="https://cdn.iconscout.com/icon/premium/png-256-thumb/play-button-88-724077.png">
                    <p>tela 02</p></li>
                </ul>
                <ul>
                <li class="Tela03" onclick="mostraInformacao('tela3')">
                    <img width="50" height="50" src="https://cdn.iconscout.com/icon/premium/png-256-thumb/play-button-88-724077.png">
                    <p>tela 03</p>
                </li>
                <li class="Tela04" onclick="mostraInformacao('tela4')">
                    <img width="50" height="50" src="https://cdn.iconscout.com/icon/premium/png-256-thumb/play-button-88-724077.png">
                    <p>tela 04</p>
                </li>
                </ul>

            </div>
       <div class="Info">  
           <div id="informacao">
               <div class="ocultaMostra">
                    USHUAHSUASHUAHSUASUASHAUSUASHUSASS
               </div>
           </div>       
           <div id="respostas">
               <div id="tela1" class="faq">Tela 1</div>
               <div id="tela2" class="faq">Tela 2</div>
               <div id="tela3" class="faq">Tela 3</div>
               <div id="tela4" class="faq">Tela 4</div>
           </div>
        </div>    
    </div>

CSS

#links {
float: left;
max-width: 50%; 
}
#links li {
cursor: pointer;
transition: 0.3s ease;
opacity: 0.7;
}

#links li:hover {
opacity: 1;
}

#respostas {
float: right;
max-width: 50%;
}

.faq {
margin: 20px;
color: white;
display: none; /* coloca todos como invisiveis inicialmente */
}
*{
font-family: 'Courier New', Courier, monospace;

}
.ocultaMostra{
   display: inline;
   color: aliceblue;
 }

.Tela01{
display: flex;
position: absolute; 
margin-left: 5%;
margin-top: 5%;
}
.Tela02{
display: flex;
position: absolute;
margin-left: 20%;
margin-top: 5%;
}
.Tela03{
display: flex;
position: absolute; 
margin-left: 5%;
margin-top: 20%;
}
.Tela04{
display: flex;
position: absolute;
margin-left: 20%;
margin-top: 20%;
}
.Info{
background: linear-gradient(to bottom , #12304b , black );
position: absolute;
height: 100%;
width: 60%;
margin-left: 40%
}

.NomeDaFerramenta{
font-size: 60px;
margin-left: 60%;
background: transparent;
z-index: 1;
position: absolute;
}
.infoMostrar{
display: none;
}

JavaScript

window.mostraInformacao = function (idObj) 
{
	$("#informacao").hide();
  $("#respostas div[class='faq']:visible").hide();

	$("#" + idObj).show();
}