JSFiddle - React, Tailwind, and code Playground

by Ghokun

HTML

<table id="ustbuttons" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td class="td1"><button id="ust1" class="ustbutton gen">GENEL BİLGİ</button></td>
<td class="td1"><button id="ust2" class="ustbutton">BAŞVURU</button></td>
<td class="td1"><button id="ust3" class="ustbutton">BELGELER</button></td>
<td class="td1"><button id="ust4" class="ustbutton">MEVZUAT</button></td>
<td class="td1"><button id="ust5" class="ustbutton">S.S.S.</button></td>
</tr></tbody></table><table id="ust1tab" class="tab" style="display:block;" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td class="td1"><button id="alt1" class="altbutton">PROGRAM HAKKINDA</button></td>
<td class="td1"><button id="alt2" class="altbutton">KİMLER BAŞVURABİLİR?</button></td>
<td class="td1"><button id="alt3" class="altbutton">SÜREÇ</button></td>

<td class="td1"><button id="alt5" class="altbutton">ÖNEMLİ HUSUSLAR</button></td>
</tr></tbody></table><table id="ust2tab" class="tab" style="display:none;" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td class="td1"><button id="alt1" class="altbutton">DENEME1</button></td>
<td class="td1"><button id="alt2" class="altbutton">DENEME2</button></td>
<td class="td1"><button id="alt3" class="altbutton">DENEME3</button></td>
<td class="td1"><button id="alt4" class="altbutton">DENEME4</button></td>
<td class="td1"><button id="alt5" class="altbutton">DENEME5</button></td>
</tr></tbody></table><table id="ust3tab" class="tab" style="display:none;" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td class="td1"><button id="alt1" class="altbutton">TAB1</button></td>
<td class="td1"><button id="alt2" class="altbutton">TAB2</button></td>
<td class="td1"><button id="alt3" class="altbutton">TAB3</button></td>
<td class="td1"><button id="alt4" class="altbutton">TAB4</button></td>
<td class="td1"><button id="alt5" class="altbutton">TAB5</button></td>
</tr></tbody></table><table id="ust4tab" class="tab" style="display:none;" border="0"...

CSS

.ustbutton{background:rgb(160,36,67);border:none;width:108.5px;height:24px;color:white;text-shadow: black 0.1em 0.1em 0.1em;font-family: "Trebuchet MS", sans-serif;font-weight:bold;}
.ustbutton.hover{background:rgb(226,226,226);color:black;cursor:pointer;text-shadow: white 0.1em 0.1em 0.1em;}
.ustbutton.clicked {background:black;color:white;text-shadow: none;}
.altbutton{background:rgb(226,226,226);border:2px solid rgb(226,226,226);width:108.5px;min-height:48px;max-height:48px;color:black;text-shadow: white 0.1em 0.1em 0.1em;font-family: "Trebuchet MS", sans-serif;font-weight:bold;}
.altbutton.hover{border:2px solid rgb(160,36,67);cursor:pointer;}
.altbutton.clicked{background:black;color:white;text-shadow: none;}
.td1 {padding-right: 1px;padding-bottom: 1px;}

JavaScript

//dosyalar tablo şeklinde verilebilirmi
$(document).ready(function() {
    $(".gen").addClass("clicked");
 });
$("button")
    .click(function(event) {
    //basılan buttonun idsini alma    
        var current_id = event.target.id
    //altbaslik ve tab idsini basılan tusa göre belirleme
        var alt_id = current_id + current_id;
        var tab_id = current_id + "tab";
    //altbaslik acıp kapatma
        $(".altbaslik").not("#"+alt_id).hide("fast");
        $("#"+alt_id).show("fast");
    //clicked classını ekleyip çıkartma
    if ($(this).hasClass("ustbutton")){
    //tab acma ve kapatma    
        $(".tab").not("#"+current_id+"tab").hide();
        $("#"+current_id+"tab").show("fast");
        $("button").not(this).removeClass("clicked");}
    else if ($(this).hasClass("altbutton")){
        $(".altbutton").not(this).removeClass("clicked");}
        $(this).addClass("clicked");        
    })
    //mouse hareketleri
    .mouseover(function() {
         $(this).addClass("hover");
    })
    .mouseout(function() {
         $(this).removeClass("hover");
    });