How to add menu buttons and make them work ?

Hello, forum!
I just trying to add one or more "menu" buttons to website.
I've added button, but it's still doesn't work.
How to new buttons work?

And menu buttons Test 0,Test 1, Test 2 wokrs normally only on html & css
without js

Here are parts of html & css codes

---

menu

<div class="tab">
    
   <input id="tab-0-ctrl" class="ctrl-radios" type="radio" name="tab-radios"> wokrs
  <input id="tab-1-ctrl" class="ctrl-radios" type="radio" name="tab-radios">  wokrs
  <input id="tab-2-ctrl" class="ctrl-radios" type="radio" name="tab-radios">  wokrs
  <input id="tab-3-ctrl" class="ctrl-radios" type="radio" name="tab-radios">  wokrs but it doesn't show id="tab-3"

  <div class="tab-nav">
      
       <div class="nav" id="nav-0">
        <label class="ctrl-label" for="tab-0-ctrl">Test 0</label> wokrs
      </div>
              <div class="nav" id="nav-1">
        <label class="ctrl-label" for="tab-1-ctrl">Test 1</label> wokrs
      </div>
              <div class="nav" id="nav-2">
        <label class="ctrl-label" for="tab-2-ctrl">Test 2</label> wokrs
      </div>
              <div class="nav" id="nav-3">
        <label class="ctrl-label" for="tab-3-ctrl">Test 3</label> wokrs but it doesn't show id="tab-3"
      </div>
          </div>

  <div class="tab-container">
      
      <div class="tab-container-block" id="tab-0" > works
          
            <ul class="grid-view" data-grid="vertical">
                          
         <h2>Test 0</h2>
                          
                      </ul>
                      <h2>test main</h2>
      </div>

    <div class="tab-container-block" id="tab-1"> works
    
                  <ul class="grid-view" data-grid="vertical">
                          
<h2>Test 1</h2>
                      </ul>
              </div>

    <div class="tab-container-block" id="tab-2"> works
<h2>Test 2</h2>
                    
              </div>

    <div class="tab-container-block" id="tab-3"> isn't shown
                  <ul class="grid-view" data-grid="vertical">
                          <h2>Test3</h2>
                    
                          
                      </ul>
              </div>
              
              
              
              
  </div>
  
  
</div>

menu

---

---

css

.tab {
  padding: 0 0 0 8px;
  width: 100%;
}

@media screen and (min-width: 1112px) {
  .tab {
    padding: 0 0 0 16px;
  }
}

.tab-nav {
  display: flex;
  margin-bottom: 10px;
}

.tab-nav > .nav {
  border-image-source: url(../images/announcement/tab_normal.png);
  border-image-slice: 24 fill;
  border-image-repeat: repeat;
  border-image-width: 12px;
  box-sizing: content-box;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 9px;
  position: relative;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  width: 100%;
  flex: 1;
  text-align: center;
}

@media screen and (min-width: 1112px) {
  .tab-nav > .nav {
    height: 58px;
    line-height: 56px;
  }
}

.tab-nav > .nav:not(:last-child) {
  margin-right: 8px;
}

.tab-nav .ctrl-label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block;
  cursor: pointer;
  margin: 0;
}

.tab-container {
  overflow: hidden;
}

.tab-container-block {
  display: none;
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.tab .ctrl-radios {
  display: none;
}

.tab #tab-0-ctrl:checked ~ .tab-container #tab-0 {
    display: block;
}

.tab #tab-1-ctrl:checked ~ .tab-container #tab-1 {
  display: block;
}

.tab #tab-2-ctrl:checked ~ .tab-container #tab-2 {
  display: block;
}


---
added
.tab #tab-3-ctrl:checked ~ .tab-container #tab-3 {
  display: block;
}
added
---

.tab #tab-0-ctrl:checked  ~ .tab-nav #nav-0 {
    border-image-source: url(../images/announcement/tab_active.png);
}

.tab #tab-1-ctrl:checked ~ .tab-nav #nav-1 {
  border-image-source: url(../images/announcement/tab_active.png);
}

.tab #tab-2-ctrl:checked ~ .tab-nav #nav-2 {
  border-image-source: url(../images/announcement/tab_active.png);
}

---
added
.tab #tab-3-ctrl:checked ~ .tab-nav #nav-3 {
  border-image-source: url(../images/announcement/tab_active.png);
}
added
---

css

---

---

css original

.tab {
  padding: 0 0 0 8px;
  width: 100%;
}

@media screen and (min-width: 1112px) {
  .tab {
    padding: 0 0 0 16px;
  }
}

.tab-nav {
  display: flex;
  margin-bottom: 10px;
}

.tab-nav > .nav {
  border-image-source: url(../images/announcement/tab_normal.png);
  border-image-slice: 24 fill;
  border-image-repeat: repeat;
  border-image-width: 12px;
  box-sizing: content-box;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 9px;
  position: relative;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  width: 100%;
  flex: 1;
  text-align: center;
}

@media screen and (min-width: 1112px) {
  .tab-nav > .nav {
    height: 58px;
    line-height: 56px;
  }
}

.tab-nav > .nav:not(:last-child) {
  margin-right: 8px;
}

.tab-nav .ctrl-label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block;
  cursor: pointer;
  margin: 0;
}

.tab-container {
  overflow: hidden;
}

.tab-container-block {
  display: none;
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.tab .ctrl-radios {
  display: none;
}

.tab #tab-0-ctrl:checked ~ .tab-container #tab-0 {
  display: block;
}

.tab #tab-1-ctrl:checked ~ .tab-container #tab-1 {
  display: block;
}

.tab #tab-2-ctrl:checked ~ .tab-container #tab-2 {
  display: block;
}

.tab #tab-0-ctrl:checked ~ .tab-nav #nav-0 {
  border-image-source: url(../images/announcement/tab_active.png);
}

.tab #tab-1-ctrl:checked ~ .tab-nav #nav-1 {
  border-image-source: url(../images/announcement/tab_active.png);
}

.tab #tab-2-ctrl:checked ~ .tab-nav #nav-2 {
  border-image-source: url(../images/announcement/tab_active.png);
}

css original

---

Hi. Where did you get this code?