как настроить вкладки на сайте?

 <div class="tabsLink">
        <a href="#tab1">Вкладка 1</a>
        <a href="#tab2">Вкладка 2</a>
        </div>
        
        <br>
        <a class="tabs" id="tab1"></a>
        <div class="tab">
        <div id="my-player"></div>
<script>
getplayer( "[xfvalue_revideo]", "[xfvalue_video]", "400", "600", "KT", "[xfvalue_embed]", "/uploads/thumbs/[xfvalue_thumb]", "{title}", "[xfvalue_playlist]"  );
</script>
 <br>
        </div>
        
        <a class="tabs" id="tab2"></a>
        <div class="tab">
    Вкладка 2 <br>
        </div>

.tabs {
    opacity: 0;  /* Прозрачность */
    visibility: hidden; /* Изначально - спрятан */
}.tab{
    position:absolute; /* Абсолютное позиционирование */
    visibility: hidden;    /* Изначально - спрятан */
    z-index: 10;    /* z-index */
    color:#478CFB; /* Цвет */
    font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
}
.tabs:target+.tab {
    opacity: 1; /* Убирает прозрачность */
    visibility: visible; /* Делает видимым */
}
.tabsLink a{
    background-color:#1f2637; /* Цвет */
    padding:5px; /* Внутренние отступы */
    font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
    color:#fff; /* Цвет */
    text-decoration:none; /* Отсутствие нижней линии */
    
    /* Округление старт */
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* Округление конец */
}