1
Well, I have a box, this box has a few tabs, clicking on the tab the contents of the box changes. The content is changed when I click on one of the links that calls the tab. Here is the code:
<p id="slid">
<a href="#slid3">3º Passo</a>
<a href="#slid2" >2º Passo</a>
<a href="#slid1" class="slidselected" >1º Passo</a>
</p>
<ul id="slidcontents">
<!-- tab 1 -->
<li id="slid1">
Conteúdo que aparece ao clicar no link 1º passo
</li>
<li id="slid2">
Conteúdo que aparece ao clicar no link 2º passo
</li>
<li id="slid3">
Conteúdo que aparece ao clicar no link 3º passo
</li>
</ul>
Then, the contents of the box only change when you click on some of the links that are within the p id="slid", and I would like to automate this, causing even if you do not click on any of these links the contents of the box change as if you had clicked. The script I use to change the contents of the box is:
$.quickslidl = function ()
{
/* Elements */
var slidl = 'p#slid';
var cont_slid = 'ul#slidcontents';
/* Hide all post */
$(cont_slid + ' li').hide();
/* Display the first tab */
$(cont_slid + ' li:first-child').show();
/* When user click a tab */
$(slidl + ' a').click(function()
{
/* Remove slidselected class on all post */
$(slidl + ' a').removeClass('slidselected');
/* Add a slidselected tab class */
$(this).addClass('slidselected');
/* Hide all opened tags */
$(cont_slid + ' li').hide();
/* Display the clickec tab */
$(cont_slid + ' ' + $(this).attr('href')).show();
/* End :D */
return false;
});
};
/* When all is ready */
$(document).ready(function() {
/* Start function */
$.quickslidl();
});
I work perfectly.
– ivan veloso
Just one more question. At the time of the loop, it never goes back to the first link, it always goes back to the second. Why is that? Up to your example, it does this. It starts at link 1, goes pro link 2 after pro 3 and jumps pro second link again
– ivan veloso
Ah, how could I also apply transition effect in script, I have tried but was not successful.
– ivan veloso
@ivanveloso, you were right about the wrong line. Here: http://jsfiddle.net/E84UF/1/
– Sergio
@ivanveloso make the transition becomes a little more complex, has to create elements that are on top of each other and transition from the
opacity
– Sergio
Calm down, you need the transition, not just to change already great. Here, because when you click on one of the links the effect stops working and it only works again if you refresh the page?
– ivan veloso
@Ivanveloso, it stops running because I wrote this node code:
if (e.which) clearInterval(galeria);
It won’t stop now.– Sergio