how to hide the section or content of the tab-CodePudding

There are 4 tabs. i need the content of the 4 tabs should be hidden i.e; the content should visible only when the particular tab is clicked. if 1st tab is clicked, only then the content should be visible.

CodePudding user response：

You can try this.

      $('.tab_wrpaper').on('click',".tab > li",function(e){
            e.preventDefault();

            var data_id = $(this).attr('data-id');
            $(".tab li").removeClass("nav-tab-active"); // this is for tab 
           list item . to remove active class
            $(this).addClass("nav-tab-active"); // this is for tab list item 
            . to add active class to the clicked list
            $(".tab-content .tab-pane").removeClass("active");  // this is 
            for tab content . to remove active class
            $(".tab-pane[data-id='tab_"   data_id   
             "']").addClass("active");   // this is for tab content . to add 
            active class          
    
       });

<div >
        <div >
            <li data-id="tab_a">Tab A</li>
            <li data-id="tab_b">Tab B</li>
        </div>
        <div >
            <div  data-id="tab_a">Content A</div>
            <div  data-id="tab_b">Content B</div>
        </div>
    </div>

CodePudding user response：

window.onfocus and window.onblur should work for your scenario