История изменений
Исправление
miltorg,
(текущая версия)
:
Менее наглядно, но более компактно и с перспективой на неограниченное количество Табов:
<?php
class taby{
function display($kn, $kont){
?>
<button id="kn0" class="tab-button active" onclick="otrTab(0)"><?=$kn[0]?></button>
<button id="kn1" class="tab-button" onclick="otrTab(1)"><?=$kn[1]?></button>
<button id="kn2" class="tab-button" onclick="otrTab(2)"><?=$kn[2]?></button>
<div id="tab0" class="tab"><?=$kont[0]?></div>
<div id="tab1" class="tab" style="display:none"><?=$kont[1]?></div>
<div id="tab2" class="tab" style="display:none"><?=$kont[2]?></div>
<script>
function otrTab(t){
let u = [];
let cv =[];
for(let i=0; i<3; i++){
u[i] = 'none';
u[t] = 'block';
cv[i] = '#f0f0f0';
cv[t] = '#e0e0e0';
globalThis['tab'+i].style.display = u[i];
globalThis['kn'+i].style.background = cv[i];
}
}
</script>
<?php
}
}
Исходная версия
miltorg,
:
Менее понятно, но более компактно и с перспективой на неограниченное количество Табов:
<?php
class taby{
function display($kn, $kont){
?>
<button id="kn0" class="tab-button active" onclick="otrTab(0)"><?=$kn[0]?></button>
<button id="kn1" class="tab-button" onclick="otrTab(1)"><?=$kn[1]?></button>
<button id="kn2" class="tab-button" onclick="otrTab(2)"><?=$kn[2]?></button>
<div id="tab0" class="tab"><?=$kont[0]?></div>
<div id="tab1" class="tab" style="display:none"><?=$kont[1]?></div>
<div id="tab2" class="tab" style="display:none"><?=$kont[2]?></div>
<script>
function otrTab(t){
let u = [];
let cv =[];
for(let i=0; i<3; i++){
u[i] = 'none';
u[t] = 'block';
cv[i] = '#f0f0f0';
cv[t] = '#e0e0e0';
globalThis['tab'+i].style.display = u[i];
globalThis['kn'+i].style.background = cv[i];
}
}
</script>
<?php
}
}