0
found a code that changes the url without refresh, but wanted to include two pages inside js according to their url, when I click
html
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="" data-tab-for="geral">Geral</a></li>
<li class="nav-item">
<a class="nav-link" href="" data-tab-for="buna-silva">Bruna Silva</a></li>
<li class="nav-item"><a class="nav-link" href="" data-tab-for="amanda-castro">Amanda Castro</a></li>
</ul>
<div class="content">
<p id="geral">Geral</p>
<p id="buna-silva" class="hide">Bruna Silva</p>
<p id="amanda-castro" class="hide">Amanda Castro</p>
</div>
htaccess
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?url=$1
js
var tabs = document.querySelectorAll("a[data-tab-for]");
var contents = document.querySelectorAll(".content>p");
tabs.forEach(tab => tab.addEventListener('click', tabClicked));
window.onpopstate = checkState;
history.replaceState({tabForId: tabs[0].dataset.tabFor}, null, ""+tabs[0].dataset.tabFor);
function showContent(id) {
contents.forEach(content => {
if (content.getAttribute('id') === id)
content.classList.remove('hide');
else
content.classList.add('hide');
});
tabs.forEach(tab => {
if (tab.dataset.tabFor === id)
tab.classList.add("active");
else
tab.classList.remove("active");
});
}
function tabClicked(e) {
var contentId = e.target.dataset.tabFor;
e.preventDefault();
showContent(contentId);
history.pushState({tabForId: contentId}, null, ""+contentId);
if(contentId == 'geral') {
// linha do erro da variavel indefinida
document.querySelectorAll(".content").innerHTML = "<?php require_once('lobby.php');?>";
} else {
document.querySelectorAll(".content").innerHTML = "<?php require_once('private.php');?>";
}
console.log(content);
}
function checkState(e) {
if(e.state) {
console.log(e.state.tabForId);
showContent(e.state.tabForId);
}
}
@Sam actually now pulls nothing
– goio
it was stupid of me, calling require on the console, just not including on the page http://prntscr.com/mu2x3w
if(contentId == 'geral') {
 
 document.querySelectorAll(".content")[0].innerHTML = "<?php require_once('lobby.php');?>";
 
 console.log(document.querySelectorAll(".content")[0].innerHTML = "<?php require_once('lobby.php');?>");
 } else {
 document.querySelectorAll(".content")[0].innerHTML = "<?php require_once('private.php');?>";

 console.log(document.querySelectorAll(".content")[0].innerHTML = "<?php require_once('private.php');?>");
 }
– goio
for now ta empty, but will have html and php
– goio
You should use Ajax for this, not put a page inside innerHTML.
– Sam
@Sam what I tried was this
function ajax() {
 $.ajax({
 url: 'https://localhost/public/' + contentId,
 method: 'GET',
 cache: false,
 success: function(data) {
 content.html(data);
 console.log(data);
 }
 });
}
gave this error http://prntscr.com/mu3bic– goio