Tab change automatically with the button index click

				
					    <div style="padding: 20px">
      <a class="btn">Button</a>
      <a class="btn">Button</a>
      <a class="btn">Button</a>
      <a class="btn">Button</a>
      <a class="btn">Button</a>
      <a class="btn">Button</a>
    </div>

    <div>
      <div class="tab">tab content</div>
      <div class="tab">tab content</div>
      <div class="tab">tab content</div>
      <div class="tab">tab content</div>
      <div class="tab">tab content</div>
      <div class="tab">tab content</div>
    </div>

    <script>
      $(document).ready(function () {

        $(".btn").click(function () {
          var indexbtn = $(this).index();
          console.log("button index:" + $(this).index());
          $(".tab, .btn").removeClass("selected");
          $(".tab").eq(indexbtn).addClass("selected");
          $(".btn").eq(indexbtn).addClass("selected");
        });
      });
    </script>

    <style>
      .btn {
        border: 1px solid;
        padding: 10px;
      }
      .btn.selected {
        background: red;
      }
      .tab {
        background: #ccc;
        padding: 100px;
        opacity: 0.5;
      }
      .tab.selected {
        opacity: 1;
      }
    </style>