Mentinere tab activ dupa reload page

Coduri intrebari, probleme legate de HTML, XHTML si CSS
andras
Mesaje: 430

Mentinere tab activ dupa reload page

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.
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).
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.

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