Butona tıklanınca class değiştirme.
<button class="tablink" onclick="openPage('all', this)" id="defaultOpen">Hepsi</button>
<button class="tablink" onclick="openPage('2d', this)">2D Cutting</button>
<button class="tablink" onclick="openPage('CAD', this)">CAD</button>
<button class="tablink" onclick="openPage('CNC', this)">CNC</button>
<button class="tablink" onclick="openPage('Saha', this)">Saha</button>
<button class="tablink" onclick="openPage('Serial', this)">Serial</button>
<button class="tablink" onclick="openPage('Laser', this)">Laseroy</button>
<button class="tablink" onclick="openPage('Milling', this)">Milling</button>
<button class="tablink" onclick="openPage('sCAD', this)">Standart CAD</button>
<button class="tablink" onclick="openPage('Bangle', this)">Bangle</button>
<button class="tablink" onclick="openPage('Foam', this)">Foam</button>
<button class="tablink" onclick="openPage('Other', this)">Diğer</button>
w3scholl' un hazır tabs' ını kullanıyorum. Butonlara atanan classların tıklanılan butonda olanını değiştirmek istiyorum nasıl yapabilirim?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (3)
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
tablinks[i].classList.remove('active') // diğer buttonlar
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
elmnt.classList.add('active') // elmnt = tıklanan buttonlar
}
