< Back to Code

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 type="litespeed/javascript">$(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>
				
			
content tab
content tab
content tab
content tab
content tab
content tab
vi

© Copyright by JAYbranding – All rights reserved.

We would like to advise you in more detail.
Please enter information to receive a consultation