Including JQuery library in VF page causing Apex tab not switching

Question

I have a visual force page where I have these two libraries at the top.

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">

I have another page with two tabs. I included both these pages in another page.Tabs on second page not switching. So I trouble shooted and commented two scripts for libraries.Tabs started working. If I include JQuery.noconflict as shown below, tabs did not switch. How can I make the tabs work without commenting the scripts. Any suggestions???

<script src="https://code.jquery.com/jquery-2.2.4.min.js">
</script>
<script>
if(jQuery) {

    jQuery.noConflict();
         }
</script>


<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script>
if(jQuery) {

    jQuery.noConflict();
         }

</script>

Answer 1

As per the jQuery documentation, it is not recommended to use two JQuery version on the page, But if you are using then you should initialize the jQuery.noconfict() syntax with a added parameter like jQuery.noconfict(true), Here is the reference:

If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.

https://api.jquery.com/jquery.noconflict/