In this article I'll cover creating interactive tabs with the help of JQuery and its JQuery-ui plugin;
JQuery is a library of java-script functions that create functionality for a web page.
Remember that these tabs are mostly used to organize information within a page and should not be confused with using it as a menu, as all the content of the tabs will be loaded on the page and hidden, and only when you click on the tab will the content it will show up.
Creating tabs
the code below it is defined that the object of id="box", will receive the functionality that will create the interactive tabs
<script>
jQuery(document).ready(function () {
jQuery("#box").tabs();
});
</script>
The tabs to receive the functionality must be in a list inside the object id="box".
<div id="box">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
<li><a href="#tab4">Tab 4</a></li>
</ul>
</div>
The Jquery in <a href="#..." defines that the #tab1, #tab2, #tab3, #tab4 anchors will open the selected tab if clicked and close the other tabs.
Then you need to define a <div id="tab"> or other element to tell the jquery where to open or close the information
<div id="tab1" > .... content </div> <div id="tab2" > .... content </div> <div id="tab3" > .... content </div> <div id="tab4" > .... content </div>
Reference: https://jqueryui.com/tabs/
Including the Youtube video
To embed a Youtube video you first have to go to the page where the youtube video and click share, then click embed and finally copy the code: <iframe>....</iframe>
Included video in mp4, ogg and webm with HTML 5
To play a video in mp4, ogg or webM formats, HTML 5 has natively brought a player. So just put the code:
<video autoplay="" loop="" muted="" class="iframe">
<source src="https://mrab.com.br/sites/default/files/Max%20Contra%20O%20Virus.mp4" type="video/mp4" >
</video>Reference: w3schools.com
I'll put the complete code of the example at the end of the page for a better understanding.
<!DOCTYPE HTML>
<html lang=”en”>
<head>
<title>Example tabs</a>
<style>
.iframe /* setting iframe appearance in height, width, and border */
{
border: none;
height: 400px;
width: 100%;
}
.texto /* defining the appearance of the text that comes under the tab */
{
font-size: 1.3em;
font-weight: bold;
}
</style>
<meta charset="utf-8">
<!-- loads the jquery library, also the plugin. jquery-ui and your css what do the tabs look like-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
//calls the jquery function, which loads the tabs() function which will create the tabs functionality and sets the object with id="box" which will load the tabs
jQuery(document).ready(function () {
jQuery("#box").tabs();
});
</script>
</head>
<body>
<div id="box">
<!-- the tabs to load must be in a list with <ul> and <li> -->
<ul>
<!-- through the anchor #tab1 the information that is carried by the object id="tab1" will be displayed and it will hide the others -->
<li><a href="#tab1">Aba 1</a></li>
<!-- through the anchor #tab2 the information that is carried by the object id="tab2" will be displayed and it will hide the others -->
<li><a href="#tab2">Aba 2</a></li>
<!-- through the anchor #tab3 the information that is carried by the object id="tab3" will be displayed and it will hide the others -->
<li><a href="#tab3">Aba 3</a></li>
<!-- through the anchor #tab4 the information that is carried by the object id="tab4" will be displayed and it will hide the others -->
<li><a href="#tab4">Aba 4</a></li>
</ul>
<!-- Load tab 1 -->
<div id="aba1" >
<p class="texto">Embedded Youtube Videoe</p>
<!-- incorpora o vídeo do you tube e pela classe iframe carregar a altura, largura e borda -->
<iframe src="https://www.youtube.com/embed/GVE7gYeoD0Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="iframe" ></iframe>
</div>
<!-- Load tab 2 -->
<div id="aba2" >
<p class="texto">MAX x Vírus</p>
<p><a href="https://play.google.com/store/apps/details?id=com.br.maxxvirus">Baixe o jogo na Google Play</a></p>
<!-- Exibe um vídeo em HTML 5 no formato mp4 e pela classe iframe carregar a altura, largura e borda -->
<video autoplay="" loop="" muted="" class="iframe">
<source src="https://mrab.com.br/sites/default/files/Max%20Contra%20O%20Virus.mp4" type="video/mp4" >
</video>
</div>
<!-- Load tab 3 -->
<div id="aba3" >
<p class="texto">Blackjack 21 Different</p>
<p><a href="https://play.google.com/store/apps/details?id=com.br.blackjackdifferent">Baixe o jogo na Google Play</a></p>
<video autoplay="" loop="" muted="" class="iframe">
<source src="https://mrab.com.br/sites/default/files/Quebre%20A%20Banca.mp4" type="video/mp4" >
</video>
</div>
<!-- Load tab 4 -->
<div id="aba4">
<p class="texto">Another embedded video from Youtube</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/9YREdOJciog" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="iframe"></iframe>
</div>
</div>
</script>
</body>
</html>
See the example:
Embedded Youtube Video
MAX x Vírus
Blackjack 21 Different
Another embedded video from Youtube
I hope you have understood that with just a few lines it is possible to make interactive tabs on a web page.