Button-Klick zeigt Tabellenwerte

<html>

<head>
<style type="text/css">
#tabs{position:relative; margin:2em auto 2em 8%; width:28em; 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:none; color:#0102d8;}
#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">Tabelle 1</li>
<li id="tb1">Tabelle 2</li>
<li id="tb2">Tabelle 3</li>
<li id="tb3">Tabelle 4</li>
</ul>
<div id="tb0_c">Das sehen sie, wenn sie den TAB1-Button drücken</div>
<div id="tb1_c">Das sehen sie, wenn sie den TAB2-Button drücken</div>
<div id="tb2_c">Das sehen sie, wenn sie den TAB3-Button drücken</div>
<div id="tb3_c">Das sehen sie, wenn sie den TAB4-Button drücken</div>
<script>
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';}
var ultabs = document.getElementById('tabs').querySelectorAll('li');
var nr_ultabs = ultabs.length;
if(sessionStorage.getItem('activetab')) {
tabsCnt(nr_ultabs, sessionStorage.getItem('activetab'));}
for(var i=0; i<nr_ultabs; i++) ultabs[i].addEventListener('click', function(){
tabsCnt(nr_ultabs, this.id);
sessionStorage.setItem('activetab', this.id);}, false);
</script>
</body>

</html>

html knowhow

Button-Klick zeigt Tabellenwerte

Button-Klick zeigt Tabellenwerte