multi tab menu in a page using jquery












0















I have a tab-menu and trying to use this tab-menu 2 times or more in a page.
But the tab-menu is not working well when multi use.



what do I need to fix the jquery ?



please help...






 $(document).ready(function(){

    	

    	$('ul.tabs li').click(function(){

    		var tab_id = $(this).attr('data-tab');



    		$('ul.tabs li').removeClass('current');

    		$('.tab-content').removeClass('current');



    		$(this).addClass('current');

    		$("#"+tab_id).addClass('current');

    	})



    })

    		ul.tabs li{ padding:3px; display:inline-block } 

    		ul.tabs li.current{ background: #ededed; color: #222; } 

    		.tab-content{ display: none;    } 

    		.tab-content.current{ display: inherit; } 

 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="container">



    	<ul class="tabs">

    		<li class="tab-link current" data-tab="tab-1">Tab One</li>

    		<li class="tab-link" data-tab="tab-2">Tab Two</li> 

    	</ul>

    	<div id="tab-1" class="tab-content current"> 1111 </div>

    	<div id="tab-2" class="tab-content"> 2222</div> 

      

      <br><br>

      

      <ul class="tabs">

    		<li class="tab-link current" data-tab="tab-3">Tab One</li>

    		<li class="tab-link" data-tab="tab-4">Tab Two</li> 

    	</ul>



    	<div id="tab-3" class="tab-content current">33</div>

    	<div id="tab-4" class="tab-content">4</div>  

    </div>










jquery







share|improve this question























  • What is it about your provided code that isn't working correctly? What are your expected results?

    – Ryan Wilson
    Nov 21 '18 at 14:30
















0















I have a tab-menu and trying to use this tab-menu 2 times or more in a page.
But the tab-menu is not working well when multi use.



what do I need to fix the jquery ?



please help...






 $(document).ready(function(){

    	

    	$('ul.tabs li').click(function(){

    		var tab_id = $(this).attr('data-tab');



    		$('ul.tabs li').removeClass('current');

    		$('.tab-content').removeClass('current');



    		$(this).addClass('current');

    		$("#"+tab_id).addClass('current');

    	})



    })

    		ul.tabs li{ padding:3px; display:inline-block } 

    		ul.tabs li.current{ background: #ededed; color: #222; } 

    		.tab-content{ display: none;    } 

    		.tab-content.current{ display: inherit; } 

 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="container">



    	<ul class="tabs">

    		<li class="tab-link current" data-tab="tab-1">Tab One</li>

    		<li class="tab-link" data-tab="tab-2">Tab Two</li> 

    	</ul>

    	<div id="tab-1" class="tab-content current"> 1111 </div>

    	<div id="tab-2" class="tab-content"> 2222</div> 

      

      <br><br>

      

      <ul class="tabs">

    		<li class="tab-link current" data-tab="tab-3">Tab One</li>

    		<li class="tab-link" data-tab="tab-4">Tab Two</li> 

    	</ul>



    	<div id="tab-3" class="tab-content current">33</div>

    	<div id="tab-4" class="tab-content">4</div>  

    </div>










jquery







share|improve this question























  • What is it about your provided code that isn't working correctly? What are your expected results?

    – Ryan Wilson
    Nov 21 '18 at 14:30














0












0








0








I have a tab-menu and trying to use this tab-menu 2 times or more in a page.
But the tab-menu is not working well when multi use.



what do I need to fix the jquery ?



please help...






 $(document).ready(function(){

    	

    	$('ul.tabs li').click(function(){

    		var tab_id = $(this).attr('data-tab');



    		$('ul.tabs li').removeClass('current');

    		$('.tab-content').removeClass('current');



    		$(this).addClass('current');

    		$("#"+tab_id).addClass('current');

    	})



    })

    		ul.tabs li{ padding:3px; display:inline-block } 

    		ul.tabs li.current{ background: #ededed; color: #222; } 

    		.tab-content{ display: none;    } 

    		.tab-content.current{ display: inherit; } 

 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="container">



    	<ul class="tabs">

    		<li class="tab-link current" data-tab="tab-1">Tab One</li>

    		<li class="tab-link" data-tab="tab-2">Tab Two</li> 

    	</ul>

    	<div id="tab-1" class="tab-content current"> 1111 </div>

    	<div id="tab-2" class="tab-content"> 2222</div> 

      

      <br><br>

      

      <ul class="tabs">

    		<li class="tab-link current" data-tab="tab-3">Tab One</li>

    		<li class="tab-link" data-tab="tab-4">Tab Two</li> 

    	</ul>



    	<div id="tab-3" class="tab-content current">33</div>

    	<div id="tab-4" class="tab-content">4</div>  

    </div>










jquery







share|improve this question














I have a tab-menu and trying to use this tab-menu 2 times or more in a page.
But the tab-menu is not working well when multi use.



what do I need to fix the jquery ?



please help...






 $(document).ready(function(){

    	

    	$('ul.tabs li').click(function(){

    		var tab_id = $(this).attr('data-tab');



    		$('ul.tabs li').removeClass('current');

    		$('.tab-content').removeClass('current');



    		$(this).addClass('current');

    		$("#"+tab_id).addClass('current');

    	})



    })

    		ul.tabs li{ padding:3px; display:inline-block } 

    		ul.tabs li.current{ background: #ededed; color: #222; } 

    		.tab-content{ display: none;    } 

    		.tab-content.current{ display: inherit; } 

 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="container">



    	<ul class="tabs">

    		<li class="tab-link current" data-tab="tab-1">Tab One</li>

    		<li class="tab-link" data-tab="tab-2">Tab Two</li> 

    	</ul>

    	<div id="tab-1" class="tab-content current"> 1111 </div>

    	<div id="tab-2" class="tab-content"> 2222</div> 

      

      <br><br>

      

      <ul class="tabs">

    		<li class="tab-link current" data-tab="tab-3">Tab One</li>

    		<li class="tab-link" data-tab="tab-4">Tab Two</li> 

    	</ul>



    	<div id="tab-3" class="tab-content current">33</div>

    	<div id="tab-4" class="tab-content">4</div>  

    </div>










 $(document).ready(function(){

    	

    	$('ul.tabs li').click(function(){

    		var tab_id = $(this).attr('data-tab');



    		$('ul.tabs li').removeClass('current');

    		$('.tab-content').removeClass('current');



    		$(this).addClass('current');

    		$("#"+tab_id).addClass('current');

    	})



    })

    		ul.tabs li{ padding:3px; display:inline-block } 

    		ul.tabs li.current{ background: #ededed; color: #222; } 

    		.tab-content{ display: none;    } 

    		.tab-content.current{ display: inherit; } 

 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="container">



    	<ul class="tabs">

    		<li class="tab-link current" data-tab="tab-1">Tab One</li>

    		<li class="tab-link" data-tab="tab-2">Tab Two</li> 

    	</ul>

    	<div id="tab-1" class="tab-content current"> 1111 </div>

    	<div id="tab-2" class="tab-content"> 2222</div> 

      

      <br><br>

      

      <ul class="tabs">

    		<li class="tab-link current" data-tab="tab-3">Tab One</li>

    		<li class="tab-link" data-tab="tab-4">Tab Two</li> 

    	</ul>



    	<div id="tab-3" class="tab-content current">33</div>

    	<div id="tab-4" class="tab-content">4</div>  

    </div>





 $(document).ready(function(){

    	

    	$('ul.tabs li').click(function(){

    		var tab_id = $(this).attr('data-tab');



    		$('ul.tabs li').removeClass('current');

    		$('.tab-content').removeClass('current');



    		$(this).addClass('current');

    		$("#"+tab_id).addClass('current');

    	})



    })

    		ul.tabs li{ padding:3px; display:inline-block } 

    		ul.tabs li.current{ background: #ededed; color: #222; } 

    		.tab-content{ display: none;    } 

    		.tab-content.current{ display: inherit; } 

 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="container">



    	<ul class="tabs">

    		<li class="tab-link current" data-tab="tab-1">Tab One</li>

    		<li class="tab-link" data-tab="tab-2">Tab Two</li> 

    	</ul>

    	<div id="tab-1" class="tab-content current"> 1111 </div>

    	<div id="tab-2" class="tab-content"> 2222</div> 

      

      <br><br>

      

      <ul class="tabs">

    		<li class="tab-link current" data-tab="tab-3">Tab One</li>

    		<li class="tab-link" data-tab="tab-4">Tab Two</li> 

    	</ul>



    	<div id="tab-3" class="tab-content current">33</div>

    	<div id="tab-4" class="tab-content">4</div>  

    </div>





jquery




jquery






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 21 '18 at 14:29









user1833620user1833620

176117




176117













  • What is it about your provided code that isn't working correctly? What are your expected results?

    – Ryan Wilson
    Nov 21 '18 at 14:30



















  • What is it about your provided code that isn't working correctly? What are your expected results?

    – Ryan Wilson
    Nov 21 '18 at 14:30

















What is it about your provided code that isn't working correctly? What are your expected results?

– Ryan Wilson
Nov 21 '18 at 14:30





What is it about your provided code that isn't working correctly? What are your expected results?

– Ryan Wilson
Nov 21 '18 at 14:30












1 Answer
1






active

oldest

votes


















1














The way you are using it is supposed to be one tab only because the code you shared hide all other tabs on the page when one tab is selected.



There is one way to solve it by recognizing the parent before showing or hiding tab content:






$(document).ready(function(){

  $('ul.tabs li').click(function(){

    var tab_id = $(this).attr('data-tab');

    var parent = $(this).closest('div');



    $(parent).find('li').removeClass('current');

    $(parent).find('.tab-content').removeClass('current');



    $(this).addClass('current');

    $(parent).find("#"+tab_id).addClass('current');

  })

})

ul.tabs li {

  padding: 3px;

  display: inline-block;

}



ul.tabs li.current {

  background: #ededed;

  color: #222;

} 



.tab-content {

  display: none;

}



.tab-content.current {

  display: inherit;

} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <div>

    <ul class="tabs">

      <li class="tab-link current" data-tab="tab-1">Tab One</li>

      <li class="tab-link" data-tab="tab-2">Tab Two</li> 

    </ul>

    <div id="tab-1" class="tab-content current"> 1111 </div>

    <div id="tab-2" class="tab-content"> 2222</div> 

  </div>

  <br><br>



  <div>

    <ul class="tabs">

      <li class="tab-link current" data-tab="tab-3">Tab One</li>

      <li class="tab-link" data-tab="tab-4">Tab Two</li> 

    </ul>



    <div id="tab-3" class="tab-content current">33</div>

    <div id="tab-4" class="tab-content">4</div>  

  </div>

</div>





Explanation



I added a div wrapper on each tab section. This div will be the guide for the code to act.



Once you click in a tab:




  • it locates the closest parent that is a div and uses it as starting point

  • it uses the show/hide logic only inside this div, not affecting other tabs on the page






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53414294%2fmulti-tab-menu-in-a-page-using-jquery%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    The way you are using it is supposed to be one tab only because the code you shared hide all other tabs on the page when one tab is selected.



    There is one way to solve it by recognizing the parent before showing or hiding tab content:






    $(document).ready(function(){
    
  $('ul.tabs li').click(function(){
    
    var tab_id = $(this).attr('data-tab');
    
    var parent = $(this).closest('div');
    

    
    $(parent).find('li').removeClass('current');
    
    $(parent).find('.tab-content').removeClass('current');
    

    
    $(this).addClass('current');
    
    $(parent).find("#"+tab_id).addClass('current');
    
  })
    
})

    ul.tabs li {
    
  padding: 3px;
    
  display: inline-block;
    
}
    

    
ul.tabs li.current {
    
  background: #ededed;
    
  color: #222;
    
} 
    

    
.tab-content {
    
  display: none;
    
}
    

    
.tab-content.current {
    
  display: inherit;
    
} 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
<div class="container">
    
  <div>
    
    <ul class="tabs">
    
      <li class="tab-link current" data-tab="tab-1">Tab One</li>
    
      <li class="tab-link" data-tab="tab-2">Tab Two</li> 
    
    </ul>
    
    <div id="tab-1" class="tab-content current"> 1111 </div>
    
    <div id="tab-2" class="tab-content"> 2222</div> 
    
  </div>
    
  <br><br>
    

    
  <div>
    
    <ul class="tabs">
    
      <li class="tab-link current" data-tab="tab-3">Tab One</li>
    
      <li class="tab-link" data-tab="tab-4">Tab Two</li> 
    
    </ul>
    

    
    <div id="tab-3" class="tab-content current">33</div>
    
    <div id="tab-4" class="tab-content">4</div>  
    
  </div>
    
</div>





    Explanation



    I added a div wrapper on each tab section. This div will be the guide for the code to act.



    Once you click in a tab:




    • it locates the closest parent that is a div and uses it as starting point

    • it uses the show/hide logic only inside this div, not affecting other tabs on the page






    share|improve this answer




























      1














      The way you are using it is supposed to be one tab only because the code you shared hide all other tabs on the page when one tab is selected.



      There is one way to solve it by recognizing the parent before showing or hiding tab content:






      $(document).ready(function(){
      
  $('ul.tabs li').click(function(){
      
    var tab_id = $(this).attr('data-tab');
      
    var parent = $(this).closest('div');
      

      
    $(parent).find('li').removeClass('current');
      
    $(parent).find('.tab-content').removeClass('current');
      

      
    $(this).addClass('current');
      
    $(parent).find("#"+tab_id).addClass('current');
      
  })
      
})

      ul.tabs li {
      
  padding: 3px;
      
  display: inline-block;
      
}
      

      
ul.tabs li.current {
      
  background: #ededed;
      
  color: #222;
      
} 
      

      
.tab-content {
      
  display: none;
      
}
      

      
.tab-content.current {
      
  display: inherit;
      
} 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      
<div class="container">
      
  <div>
      
    <ul class="tabs">
      
      <li class="tab-link current" data-tab="tab-1">Tab One</li>
      
      <li class="tab-link" data-tab="tab-2">Tab Two</li> 
      
    </ul>
      
    <div id="tab-1" class="tab-content current"> 1111 </div>
      
    <div id="tab-2" class="tab-content"> 2222</div> 
      
  </div>
      
  <br><br>
      

      
  <div>
      
    <ul class="tabs">
      
      <li class="tab-link current" data-tab="tab-3">Tab One</li>
      
      <li class="tab-link" data-tab="tab-4">Tab Two</li> 
      
    </ul>
      

      
    <div id="tab-3" class="tab-content current">33</div>
      
    <div id="tab-4" class="tab-content">4</div>  
      
  </div>
      
</div>





      Explanation



      I added a div wrapper on each tab section. This div will be the guide for the code to act.



      Once you click in a tab:




      • it locates the closest parent that is a div and uses it as starting point

      • it uses the show/hide logic only inside this div, not affecting other tabs on the page






      share|improve this answer


























        1












        1








        1







        The way you are using it is supposed to be one tab only because the code you shared hide all other tabs on the page when one tab is selected.



        There is one way to solve it by recognizing the parent before showing or hiding tab content:






        $(document).ready(function(){
        
  $('ul.tabs li').click(function(){
        
    var tab_id = $(this).attr('data-tab');
        
    var parent = $(this).closest('div');
        

        
    $(parent).find('li').removeClass('current');
        
    $(parent).find('.tab-content').removeClass('current');
        

        
    $(this).addClass('current');
        
    $(parent).find("#"+tab_id).addClass('current');
        
  })
        
})

        ul.tabs li {
        
  padding: 3px;
        
  display: inline-block;
        
}
        

        
ul.tabs li.current {
        
  background: #ededed;
        
  color: #222;
        
} 
        

        
.tab-content {
        
  display: none;
        
}
        

        
.tab-content.current {
        
  display: inherit;
        
} 

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
<div class="container">
        
  <div>
        
    <ul class="tabs">
        
      <li class="tab-link current" data-tab="tab-1">Tab One</li>
        
      <li class="tab-link" data-tab="tab-2">Tab Two</li> 
        
    </ul>
        
    <div id="tab-1" class="tab-content current"> 1111 </div>
        
    <div id="tab-2" class="tab-content"> 2222</div> 
        
  </div>
        
  <br><br>
        

        
  <div>
        
    <ul class="tabs">
        
      <li class="tab-link current" data-tab="tab-3">Tab One</li>
        
      <li class="tab-link" data-tab="tab-4">Tab Two</li> 
        
    </ul>
        

        
    <div id="tab-3" class="tab-content current">33</div>
        
    <div id="tab-4" class="tab-content">4</div>  
        
  </div>
        
</div>





        Explanation



        I added a div wrapper on each tab section. This div will be the guide for the code to act.



        Once you click in a tab:




        • it locates the closest parent that is a div and uses it as starting point

        • it uses the show/hide logic only inside this div, not affecting other tabs on the page






        share|improve this answer













        The way you are using it is supposed to be one tab only because the code you shared hide all other tabs on the page when one tab is selected.



        There is one way to solve it by recognizing the parent before showing or hiding tab content:






        $(document).ready(function(){
        
  $('ul.tabs li').click(function(){
        
    var tab_id = $(this).attr('data-tab');
        
    var parent = $(this).closest('div');
        

        
    $(parent).find('li').removeClass('current');
        
    $(parent).find('.tab-content').removeClass('current');
        

        
    $(this).addClass('current');
        
    $(parent).find("#"+tab_id).addClass('current');
        
  })
        
})

        ul.tabs li {
        
  padding: 3px;
        
  display: inline-block;
        
}
        

        
ul.tabs li.current {
        
  background: #ededed;
        
  color: #222;
        
} 
        

        
.tab-content {
        
  display: none;
        
}
        

        
.tab-content.current {
        
  display: inherit;
        
} 

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
<div class="container">
        
  <div>
        
    <ul class="tabs">
        
      <li class="tab-link current" data-tab="tab-1">Tab One</li>
        
      <li class="tab-link" data-tab="tab-2">Tab Two</li> 
        
    </ul>
        
    <div id="tab-1" class="tab-content current"> 1111 </div>
        
    <div id="tab-2" class="tab-content"> 2222</div> 
        
  </div>
        
  <br><br>
        

        
  <div>
        
    <ul class="tabs">
        
      <li class="tab-link current" data-tab="tab-3">Tab One</li>
        
      <li class="tab-link" data-tab="tab-4">Tab Two</li> 
        
    </ul>
        

        
    <div id="tab-3" class="tab-content current">33</div>
        
    <div id="tab-4" class="tab-content">4</div>  
        
  </div>
        
</div>





        Explanation



        I added a div wrapper on each tab section. This div will be the guide for the code to act.



        Once you click in a tab:




        • it locates the closest parent that is a div and uses it as starting point

        • it uses the show/hide logic only inside this div, not affecting other tabs on the page






        $(document).ready(function(){
        
  $('ul.tabs li').click(function(){
        
    var tab_id = $(this).attr('data-tab');
        
    var parent = $(this).closest('div');
        

        
    $(parent).find('li').removeClass('current');
        
    $(parent).find('.tab-content').removeClass('current');
        

        
    $(this).addClass('current');
        
    $(parent).find("#"+tab_id).addClass('current');
        
  })
        
})

        ul.tabs li {
        
  padding: 3px;
        
  display: inline-block;
        
}
        

        
ul.tabs li.current {
        
  background: #ededed;
        
  color: #222;
        
} 
        

        
.tab-content {
        
  display: none;
        
}
        

        
.tab-content.current {
        
  display: inherit;
        
} 

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
<div class="container">
        
  <div>
        
    <ul class="tabs">
        
      <li class="tab-link current" data-tab="tab-1">Tab One</li>
        
      <li class="tab-link" data-tab="tab-2">Tab Two</li> 
        
    </ul>
        
    <div id="tab-1" class="tab-content current"> 1111 </div>
        
    <div id="tab-2" class="tab-content"> 2222</div> 
        
  </div>
        
  <br><br>
        

        
  <div>
        
    <ul class="tabs">
        
      <li class="tab-link current" data-tab="tab-3">Tab One</li>
        
      <li class="tab-link" data-tab="tab-4">Tab Two</li> 
        
    </ul>
        

        
    <div id="tab-3" class="tab-content current">33</div>
        
    <div id="tab-4" class="tab-content">4</div>  
        
  </div>
        
</div>





        $(document).ready(function(){
        
  $('ul.tabs li').click(function(){
        
    var tab_id = $(this).attr('data-tab');
        
    var parent = $(this).closest('div');
        

        
    $(parent).find('li').removeClass('current');
        
    $(parent).find('.tab-content').removeClass('current');
        

        
    $(this).addClass('current');
        
    $(parent).find("#"+tab_id).addClass('current');
        
  })
        
})

        ul.tabs li {
        
  padding: 3px;
        
  display: inline-block;
        
}
        

        
ul.tabs li.current {
        
  background: #ededed;
        
  color: #222;
        
} 
        

        
.tab-content {
        
  display: none;
        
}
        

        
.tab-content.current {
        
  display: inherit;
        
} 

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
<div class="container">
        
  <div>
        
    <ul class="tabs">
        
      <li class="tab-link current" data-tab="tab-1">Tab One</li>
        
      <li class="tab-link" data-tab="tab-2">Tab Two</li> 
        
    </ul>
        
    <div id="tab-1" class="tab-content current"> 1111 </div>
        
    <div id="tab-2" class="tab-content"> 2222</div> 
        
  </div>
        
  <br><br>
        

        
  <div>
        
    <ul class="tabs">
        
      <li class="tab-link current" data-tab="tab-3">Tab One</li>
        
      <li class="tab-link" data-tab="tab-4">Tab Two</li> 
        
    </ul>
        

        
    <div id="tab-3" class="tab-content current">33</div>
        
    <div id="tab-4" class="tab-content">4</div>  
        
  </div>
        
</div>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 21 '18 at 14:56









        Gabriel SiedlerGabriel Siedler

        15427




        15427
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53414294%2fmulti-tab-menu-in-a-page-using-jquery%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            'app-layout' is not a known element: how to share Component with different Modules

            Image
            0 My application was working fine until I decided to go with lazy loading: So, my shared component looks like this: import { Component, Renderer2 } from '@angular/core'; export interface FormModel { captcha?: string; } @Component({ selector: 'app-layout', templateUrl: './app-layout.component.html', styleUrls: ['./app-layout.css'] }) export class FullLayoutComponent { } app-layout.component.ts I am using this component in my Another component say school-home.component.html like this: <app-layout> </app-layout> and it was working fine until I created a Module school-home.module.ts like this: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SchoolhomeRoutingModule ...
            Read more

            android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

            Image
            .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 0 This is a simple project showing cubes on Unity, exported to android project and imported on Android studio. On maifest file it showed following warning: Expecting <uses-feature android:name="android.software.leanback" android:required="false" /> tag I have no information about it. And also on default emptyview android project does not use/mention this feature. I know it is required by TV's and such but why its not added by default? Why is this? And Should I concern about it? android unity3d ...
            Read more

            WPF add header to Image with URL pettitions [duplicate]

            Image
            up vote 0 down vote favorite This question already has an answer here: Image source URI requiring authorization 3 answers Add header to all* HTTP requests on a machine 1 answer first of all sorry for my english. Recently I added some security in the backend of my project, and now I need to send a validation code(apiKey) inside the headers to retrieve the images. I have a problem with ALL images in my project that I had attached in my UI. For example, before I had: <Image Height="90" Source="{Binding Video.Thumbnail}"/> Now I need to change my code to create a CUSTOM petition add the apiKey in the header:...
            Read more