How to build simple tabs with jQuery?

Tabbed Content with jQuery and CSS

Example

  • Test1
  • Test2
  • Test3
Test1 Details
Test2 Details
Test3 Details
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
         .tab {
         width:240px;
         margin:50px;
         }
         .tab_menu {
         clear:both;
         }
         .tab_menu li {
         float:left;
         text-align:center;
         cursor:pointer;
         list-style:none;
         padding:1px 6px;
         margin-right:4px;
         background:#F1F1F1;
         border:1px solid #898989;
         border-bottom:none;
         }
         .tab_menu li.hover {
         background:#DFDFDF;
         }
         .tab_menu li.selected {
         color:#FFF;
         background:#6D84B4;
         }
         .tab_box {
         clear:both;
         border:1px solid #898989;
         height:100px;
         }
         .hide{
         display:none
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
      <script>
         $(function () {
            let $div_li = $(".tab_menu ul li");
            $div_li.click(function () {
                $(this).addClass("selected").siblings().removeClass("selected");
                let index = $(this).index();
                $(".tab_box>div").eq(index).show().siblings().hide();
            })
         });
      </script>
   </head>
   <body>
      <div class="tab">
         <div class="tab_menu">
            <ul>
               <li class="selected">Test1</li>
               <li>Test2</li>
               <li>Test3</li>
            </ul>
         </div>
         <div class="tab_box">
            <div>Test1 Details</div>
            <div class="hide">Test2 Details</div>
            <div class="hide">Test3 Details</div>
         </div>
      </div>
   </body>
</html>
Most Helpful This Week