Golang React JS Technology Blog

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
Example to take user input and display on screen using JavaScript How can I redirect the user from one page to another using jQuery or pure JavaScript? How to set checkbox and radio option checked on load with jQuery? How to get selected text from a select box using jQuery? What's the difference between let and var? How to show hide option list items using jQuery?