Salut,
Am o pagina curenta cu 5 tab-uri. In tab-ul 2 am un buton cu "reload page". Cum fac ca dupa reload page sa mi se deschida tot tabul 2? In prezent dupa reload page sare automat la primul tab.
Mentinere tab activ dupa reload page
-
- Mesaje: 430
Mentinere tab activ dupa reload page
MarPlo
Mesaje: 4343
Salut
Adauga codul html cu tab-urile si cel cu butonul care face reload (daca butonul foloseste javascript, pune si acel cod).
Adauga codul html cu tab-urile si cel cu butonul care face reload (daca butonul foloseste javascript, pune si acel cod).
andras
Mesaje: 430
Fisierul html cu buton in tab-ul 2 (nu stiu cum sa pun fisierele .css si .js pentru vizualizarea corecta):
Cod: Selectaţi tot
<!DOCTYPE html>
<head>
<title>Casco</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/tabs.css" />
<link rel="stylesheet" type="text/css" href="css/tabstyles.css" />
<script type="text/javascript" src="js/cbpFWTabs.js"></script>
</head>
<body>
<div class="">
<section>
<div class="tabs tabs-style-flip">
<nav>
<ul>
<li><a href="#section-flip-1" class=""><span>List0</span></a></li>
<li><a href="#section-flip-2" class=""><span>List1</span></a></li>
<li><a href="#section-flip-3" class=""><span>List2</span></a></li>
<li><a href="#section-flip-4" class=""><span>List3</span></a></li>
<li><a href="#section-flip-5" class=""><span>List4</span></a></li>
</ul>
</nav>
<div class="content-wrap">
<section id="section-flip-1">1</section>
<!-- in tab-ul 2 am butonul -->
<section id="section-flip-2">
<p>
<div style="position: absolute; top: 5;left: 460px;">
<input type="button" name="some_name" value="Reload page" onclick="window.location.reload();"id="some_name"
align="center"/>
</div>
</p>
</section>
<section id="section-flip-3"><p>3</p></section>
<section id="section-flip-4"><p>4</p></section>
<section id="section-flip-5"><p>5</p></section>
</div><!-- /content -->
</div><!-- /tabs -->
</section>
</div>
<script>
(function() {
[].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) {
new CBPFWTabs( el );
});
})();
</script>
</body>
</html>
MarPlo
Mesaje: 4343
Nu stiu cum se poate face in codul tau, nu cunosc despre cbpFWTabs. Dar ca solutie, se poate folosi sessionStorage in Javascript ca sa retii ultimul tab activ (sau si alte date necesare in caz de refresh).
Uite un exemplu complet pe care il poti testa si sa-l adaptezi la pagina ta.
Uite un exemplu complet pe care il poti testa si sa-l adaptezi la pagina ta.
Cod: Selectaţi tot
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tabs effect with HTML, CSS, JavaScript</title>
<style type="text/css">
/* Tabs */
#tabs{
position:relative;
margin:2em auto 2em 8%;
width:22em;
background-color:#d0d1fe;
padding:0 .15em 0 .5em;
-moz-border-radius:.6em;
-webkit-border-radius:.6em;
-khtml-border-radius:.6em;
border-radius:.6em;
}
#tabs li{
display:inline;
margin:auto .2em;
border:1px solid #adadda;
background-color:#e6e7fe;
padding:.35em;
font-size:1em;
font-weight:700;
cursor:pointer;
}
#tabs li.tabvi{
background-color:#d1fdd2;
border:1px solid #b7f3b8;
-moz-border-radius:1px;
-webkit-border-radius:1px;
-khtml-border-radius:1px;
border-radius:1px;
}
#tabs li:hover{
border:1px dotted #adadda;
background-color:#f9f9b8;
text-decoration:underline;
color:#0102d8;
}
/* Tabs content */
#tb0_c, #tb1_c, #tb2_c, #tb3_c {
position:relative;
margin:.1em 2%;
background:#fbfbe1;
padding:.3em 3%;
-moz-border-radius:.9em;
-webkit-border-radius:.9em;
-khtml-border-radius:.9em;
border-radius:.9em;
}
#tb1_c, #tb2_c, #tb3_c { display: none; }
</style>
</head>
<body>
<ul id="tabs">
<li id="tb0" class="tabvi">Tab 1</li>
<li id="tb1">Tab 2</li>
<li id="tb2">Tab 3</li>
<li id="tb3">Tab 4</li>
</ul>
<div id="tb0_c">Content: ...<br>Web site: https://coursesweb.net/ - Web development, free courses.</div>
<div id="tb1_c">Content: ...<br>Web site: https://marplo.net/ - Web development, foreign languages, games.</div>
<div id="tb2_c">Content: ...<br>Web site: http://php.net/ - PHP official website.</div>
<div id="tb3_c">Content: ...<br>Web site: http://www.google.com/ - Global search engine portal.</div>
<script>
/* Tabs effect ( https://coursesweb.net/ ) */
// sets active tab, hides tabs content and shows content associated to current active tab
// receives the number of tabs, and the id of active tab
function tabsCnt(nr_tabs, av_tab) {
document.getElementById('tabs').querySelector('.tabvi').removeAttribute('class');
if(document.getElementById(av_tab)) document.getElementById(av_tab).setAttribute('class', 'tabvi');
for(var i=0; i<nr_tabs; i++) document.getElementById('tb'+ i +'_c').style.display = 'none';
if(document.getElementById(av_tab +'_c')) document.getElementById(av_tab +'_c').style.display = 'block';
}
// get the tabs elements
var ultabs = document.getElementById('tabs').querySelectorAll('li');
var nr_ultabs = ultabs.length;
// See if we have an activetab value (this will only happen if the page is refreshed)
if(sessionStorage.getItem('activetab')) {
tabsCnt(nr_ultabs, sessionStorage.getItem('activetab'));
}
// registers click for tabs
for(var i=0; i<nr_ultabs; i++) ultabs[i].addEventListener('click', function(){
tabsCnt(nr_ultabs, this.id);
// stores the id of the current active tab
sessionStorage.setItem('activetab', this.id);
}, false);
</script>
</body>
</html>
andras
Mesaje: 430
Da, il voi studia. Tipul de tab-uri ales a fost la cerinta utilizatorului aplicatiei.
Subiecte similare
-
Cerere: Schimbare limba site fara reload la pagina
Cereri si Oferte
Primul mesaj
Salut,am in site implementat un script de schimbarea limbii in care eu am adaugat in scriptul meu original urmatoarea functieUltimul mesaj
<?php echo...
Vezi tutorialele din cursul Ajax de pe site.
Alt demo nu am.
Oricum, nu pare ceva dificil pentru cine a mai lucrat cu ajax; se face un cod... -
Afisare rezultate paginate la scroll page
JavaScript - jQuery - Ajax
Primul mesaj
Salut,Ultimul mesaj
In baza de date am 23 de rezultate din care initial afisez doar 10 si as vrea ca atunci cand ajung cu scroll la finalul paginii sa imi...
Am rezolvat(era o litera gresit apasata pe acolo), imi merge scriptul, dar a mai aparut o eroare.
Eu am 21 de inregistrari in baza de date.
Daca... -
mysql Update dupa nume
PHP - MySQL - XML
Primul mesaj
Salutari,Ultimul mesaj
Incerc de ceva timp sa fac sa imi salveze informatiile jucatorului in baza de date, o data inserate vreau atunci cand gaseste din nou...
Cand se creaza tabelul in baza de date, coloana nickname trebuie sa fie de tip UNIQUE KEY .
Iar id-ul ar trebui sa fie o valoare care sa nu o mai... -
Select dupa mai multe coloane in baza de date
PHP - MySQL - XML
Primul mesaj
SalutUltimul mesaj
am si eu o baza de date zona_geografica in care am rubricile
id |nume_tara |nume_oras |id_tara |id_oras | nume_zona | id_zona | data
1 |...
Multumesc mult pentru ajutor . -
După Lună, China se îndreaptă spre Marte
Stiri Deosebite
După ce a cucerit Luna, China se îndreaptă direct spre Marte.
<img style='width:99%' src='/forum/images/china_probe_rocket.webp' alt='China... -
Arata profil pe prima pagina dupa delogare
Discutii si Intrebari Diverse
Primul mesaj
Salut,facebook are asa ceva implementatUltimul mesaj
faceprofil.png
Stii cumva unde pot gasi un script php la fel?adica dupa ce ma deloghez de pe site sa...
Salut,
Nu cunosc un astfel de script. Trebuie facut special pe scriptul de logare care-l ai, cu retinerea in baza de date sau cookie a ultimului...