A simple tab script with jquery
jQuery has been being used since it was released. It’s a really nice and useful library. Now, we are going to make a simple tab script with jquery.
You can download it in here.
Add the jquery files to the html file.
<script type="text/javascript" src="jquery-latest.js"></script>
We are going to use two control. These are ; $hide(“slow”); and $show(“slow”);
$("#tab2").hide("slow");
tab2 is div’s id.
We write div’s information instead of tab2. “hide”, hides the “div” and “slow” makes this transaction more slow. But if we want, we can set it as “fast”. In this manner, we can make a simple tab script with animation.
<script type="text/javascript">
function kapat()
{
$("#tab2").hide("slow");
$("#tab3").hide("slow");
}
function tab1()
{
$("#tab1").show("slow");
$("#tab2").hide("slow");
$("#tab3").hide("slow");
}
function tab2()
{
$("#tab1").hide("slow");
$("#tab2").show("slow");
$("#tab3").hide("slow");
}
function tab3()
{
$("#tab1").hide("slow");
$("#tab2").hide("slow");
$("#tab3").show("slow");
}
</script>
kapa() is the first function. Because we should hide the tab2 and tab3. then, we should open the tab1 .After that, in 3 tabs, we write different function.In tab1 function, we open the tab1 and hide tab2 and tab3.In tab2 function, we open the tab2 and hide tab2 and tab3. Finally, in tab3 function, we open the tab3 and hide tab2 and tab1.
let’s see other codes;
<body onload="kapat();"> <a onclick="tab1();">Tab1</a> | <a onclick="tab2();">Tab2</a> | <a onclick="tab3();">Tab3</a> <div id="tab1">Tab 1 denemesi</div> <div id="tab2">Tab 2 denemesi</div> <div id="tab3">Tab 3 denemesi</div> </body>
The reason why we use “onlad=”kapat();” is, start up the function “kapat()”. Thanks to the code “onclicks=”tab1()”, we want that, when we tick to “tab1()”, function “tab1()” will started up.
Last situation;
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
function kapat()
{
$("#tab2").hide("slow");
$("#tab3").hide("slow");
}
function tab1()
{
$("#tab1").show("slow");
$("#tab2").hide("slow");
$("#tab3").hide("slow");
}
function tab2()
{
$("#tab1").hide("slow");
$("#tab2").show("slow");
$("#tab3").hide("slow");
}
function tab3()
{
$("#tab1").hide("slow");
$("#tab2").hide("slow");
$("#tab3").show("slow");
}
</script>
<body onload="kapat();"> <a onclick="tab1();">Tab1</a> | <a onclick="tab2();">Tab2</a> | <a onclick="tab3();">Tab3</a> <div id="tab1">Tab 1 denemesi</div> <div id="tab2">Tab 2 denemesi</div> <div id="tab3">Tab 3 denemesi</div> </body>
And, that’s all. You can download script in here.
Hi!! great script there!! Thank you for your script. This helped me in my project.
-Arma