-2
As if it makes a menu in this style here, that by clicking it hides one content, and shows another?
Some example of how to do more or less?
Something like this side menu of this site for example
1 answer
1
Create each page in the same location, same name. NOTE: you need a server to run, just open the file with browser does not work. If you have php in the path, just use the cmd command "php -S localhost:3000" inside the folder where the files are.
index.html
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Requisições assíncronas</title>
<!-- bootstrap - link cdn -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script>
function requisitarPagina(url) {
document.getElementById('conteudo').innerHTML = ''
//incluir o gif de loading na página
if(!document.getElementById('loading')) {
let imgLoading = document.createElement('img')
imgLoading.id = 'loading'
imgLoading.src = 'loading.gif'
imgLoading.className = 'rounded mx-auto d-block'
document.getElementById('conteudo').appendChild(imgLoading)
}
let ajax = new XMLHttpRequest();
//requisição não iniciada, state = 0
//console.log(ajax.readyState)
ajax.open('GET', url)
//conexão estabelecida com o servidor, state = 1
//console.log(ajax.readyState)
//de alguma lógica que fique olhando para o progresso da req
ajax.onreadystatechange = () => {
if(ajax.readyState == 4 && ajax.status == 200) {
document.getElementById('conteudo').innerHTML = ajax.responseText
//document.getElementById('loading').remove()
}
if(ajax.readyState == 4 && ajax.status == 404) {
document.getElementById('conteudo').innerHTML = '.. tente novamente mais tarde :s ..'
//document.getElementById('loading').remove()
}
}
ajax.send()
//console.log(ajax)
}
</script>
</head>
<body>
<!-- Static navbar -->
<nav class="navbar navbar-light bg-light mb-4">
<div class="container">
<div class="navbar-brand mb-0 h1">
<h3>Requisições síncronas e assíncronas</h3>
</div>
</div>
</nav>
<div class="container">
<div class="row mb-2 d-flex justify-content-center">
<div class="col-sm-2 mb-2">
<a href="#" class="btn btn-primary" onclick="requisitarPagina('pagina_1.html')">Página 1</a>
</div>
<div class="col-sm-2 mb-2">
<a href="#" class="btn btn-primary" onclick="requisitarPagina('pagina_2.html')">Página 2</a>
</div>
<div class="col-sm-2 mb-2">
<a href="#" class="btn btn-primary" onclick="requisitarPagina('pagina_3.html')">Página 3</a>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10" id="conteudo"></div>
<div class="col-md-1"></div>
</div>
</div>
</body>
</html>paginate_1.html
<div class="panel panel-default">
<div class="panel-body">
<h4>PÁGINA 1</h4>
<hr />
<p>Lorem ipsum accumsan vulputate magna etiam nulla condimentum adipiscing, lectus sapien iaculis quisque cras ornare et viverra, vel metus interdum adipiscing ante condimentum leo. et fusce in non in senectus etiam, quisque conubia litora quis massa cursus, gravida justo nibh conubia vel. neque aenean integer viverra habitant fermentum ligula sed mollis taciti facilisis nullam blandit duis in commodo, faucibus pulvinar augue volutpat fringilla sagittis nostra blandit himenaeos augue risus fames ultrices. rhoncus volutpat etiam eleifend lorem eget sagittis viverra aliquam facilisis erat commodo ultricies, senectus curae sem rutrum pretium ut aptent ac imperdiet posuere diam, phasellus venenatis sem morbi nunc nulla cursus nullam vitae velit vulputate.</p>
<p>Mollis elit libero potenti iaculis himenaeos curabitur ornare metus, vel rhoncus sociosqu eros interdum curabitur placerat scelerisque odio, amet venenatis curae posuere massa ante ut. quisque dui maecenas turpis dolor lobortis a velit aliquet purus, faucibus amet euismod habitasse inceptos urna proin massa proin curabitur, odio ante aenean dolor magna rhoncus pulvinar consectetur. habitasse ad pellentesque egestas taciti nullam tincidunt hac fringilla netus primis suspendisse, vestibulum nisi sit vitae rutrum convallis donec semper diam. imperdiet praesent magna faucibus est aliquam varius semper, dui auctor vulputate nunc aenean placerat, platea libero et in fringilla blandit.</p>
</div>
</div>pagina_2.html
<div class="panel panel-default">
<div class="panel-body">
<h4>PÁGINA 2</h4>
<hr />
<p>Curae nibh ipsum aptent urna augue neque facilisis enim tellus ornare ultrices, nisl metus ut etiam quisque mattis ipsum congue dolor himenaeos. non facilisis phasellus sodales pharetra maecenas fermentum, sapien metus justo elit nisi gravida vel, curabitur risus nunc ac gravida. sollicitudin vulputate mauris est augue id ornare elit, viverra ullamcorper maecenas feugiat cubilia convallis, viverra cras habitant hendrerit pretium fames. quisque suscipit tortor id morbi commodo sodales dolor cras imperdiet, lectus sapien dictum senectus himenaeos aptent congue magna sociosqu feugiat, fringilla fermentum felis sollicitudin aliquam ipsum elit cras.</p>
</div>
</div>pagina_3.html
<div class="panel panel-default">
<div class="panel-body">
<h4>PÁGINA 3</h4>
<hr />
<p>Condimentum platea cursus aptent odio tempor hac sit, hac interdum sociosqu lobortis adipiscing elit vitae, suscipit tristique dictum nullam donec venenatis. purus molestie velit habitant phasellus, class taciti ultricies risus tempor, porta viverra sagittis. curabitur interdum luctus phasellus vulputate viverra molestie at consectetur, justo dolor lectus iaculis quisque turpis a quam mi, dictum a varius blandit cursus volutpat hendrerit. amet aliquet neque praesent donec neque vehicula fusce, consectetur mi sed aliquam dictumst sem torquent, diam leo sapien pretium lectus sit. aliquet nibh aptent venenatis risus porta mi inceptos arcu massa felis, congue ornare phasellus ligula semper sapien varius etiam donec tempor litora, molestie mollis faucibus porttitor eu sociosqu maecenas ipsum viverra.</p>
<p>Fermentum donec viverra curae vehicula netus donec libero odio nibh fusce, sollicitudin duis porta mattis cubilia arcu rutrum fringilla orci. ultrices laoreet semper augue malesuada elit congue odio venenatis dui velit, porta elementum himenaeos ac luctus justo vestibulum nec donec est quisque, consectetur viverra diam congue lorem aliquet mauris netus varius. justo consectetur ut nulla elit leo dictum non phasellus leo, vulputate nisl nostra tincidunt elit sapien malesuada sodales, facilisis mollis hac cursus conubia augue taciti bibendum. suspendisse dapibus libero nunc nulla vivamus non habitant integer semper turpis, vitae donec suspendisse venenatis sit est velit risus.</p>
<p>Arcu aliquam id pharetra taciti sapien auctor egestas, netus id rhoncus aenean eros blandit et, hendrerit elementum mauris ligula accumsan dictum. amet class suspendisse adipiscing sit dui urna neque odio, adipiscing consectetur dui ultricies etiam porttitor vivamus, libero lobortis proin commodo rutrum facilisis aenean. praesent id etiam ullamcorper mollis sodales blandit cubilia ultrices, a volutpat aenean vel quisque phasellus rutrum morbi, nullam feugiat semper curae netus tempus orci. tristique ligula viverra morbi aliquet nisl bibendum, proin et diam urna consequat sed, sem aenean non vivamus quisque. pellentesque id arcu hac nec donec mauris, pharetra habitasse sed dictumst massa, fermentum adipiscing augue cras nulla.</p>
</div>
</div>-
worked very well, I had stopped to give a studied in the code and I saw that really I had not put the navbar. Thank you very much friend.
Browser other questions tagged php javascript html jquery css
You are not signed in. Login or sign up in order to post.
Face the "logic" is the same as a navigation system by tabs, you find it everywhere, look for Tab Navigation, or Tab Component
– hugocsl
This can be done with Ajax
– Bernardo Lopes
Welcome to Sopt. Please. Do the Tour and read the Sopt Survival Guide - Short Version
– Pedro Sanção