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
-
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... -
Resetare input type text dupa submit
JavaScript - jQuery - Ajax
Primul mesaj
Dupa ce dau enter sau click si a trimis mesajul nu mii se reseteaza input textul,imi trmite catre mysql fara reload incarca textul prin div dar nu...Ultimul mesaj
\Multumesc, codul din raspunsul tau functioneaza -
Ajax fade mesaj si redirect dupa un timp
JavaScript - jQuery - Ajax
Primul mesaj
Am codul asta si vreau in loc de input type=button sa fie submit, dar sa imi dea fade la fel in 5 secunde de cand apare eroarea.Ultimul mesaj
Daca schimb cu...
Am rezolvat,multumesc frumos de ajutor