Creating a kind of false click

Question

Creating a kind of false click

Navigation

#1 by (3 votes)
#2 by (0 votes)

1

Well, I have a box, this box has some tabs, clicking on the tab the contents of the box changes. The content is changed when I click on one of the links that the tab calls. 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>

So the content of the box changes only when you click on some of the links that are inside the p id="slid", and I would like to automate this, making even if I do not click any of these links contents of the box to change as if it had been 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();

});

jquery

asked by anonymous 06.06.2014 / 05:45

2 answers

0

You can use JQuery's event.preventDefault () , which will remove the default behavior from that link (which would go to a url there defined in the href attribute of tag a) and add its behavior customized. You would create handlers for your links (through their ids or picking up any link tags even if you prefer as the example below shows).

See usage example below:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.preventDefault demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>

<script>
$( "a" ).click(function( event ) {
  event.preventDefault();
  $( "<div>" )
    .append( "default " + event.type + " prevented" )
    .appendTo( "#log" );
});
</script>

</body>
</html>

More information about this command: link

And you create click actions using the Jquery click () command as well

$( "#other" ).click(function() {
  $( "#target" ).click();
});

More information about the click () command: link

The timer functionality you can implement using the setInterval function, which would be called from the appropriate handler. An example of very simple use follows below:

//exibe um alert na tela a cada 5 segundos
setInterval(function(){alert(" Teste do cronometro ")}, 5000);

More examples of using setInterval see here: link

06.06.2014 / 05:56

Connect android screen Handling dates for searching the bank

score 3 · Accepted Answer

Test like this:

$(document).ready(function () {
    var galeria, i = 0;
    var links = $('#slid a').get().reverse();
    var slides = $('#slidcontents li');
    $(links).on('click', function (e) {
        e.preventDefault();
        slides.removeClass('mostrar');
        slides.eq(links.indexOf(this)).addClass('mostrar');
        if (e.which) clearInterval(galeria);
    });
    galeria = setInterval(function () {
        i++;
        $(links).eq(i).click();
        if (i == links.length) i = 0;
    }, 1000);
});

Example: link

Test like this:

$(document).ready(function () {
    var galeria, i = 0;
    var links = $('#slid a').get().reverse();
    var slides = $('#slidcontents li');
    $(links).on('click', function (e) {
        e.preventDefault();
        slides.removeClass('mostrar');
        slides.eq(links.indexOf(this)).addClass('mostrar');
        if (e.which) clearInterval(galeria);
    });
    galeria = setInterval(function () {
        $(links).eq(i).click();
        i++;
        if (i == links.length) i = 0;
    }, 1000);
});

Example: link

The code above has two parts. The part that deals with the click causes the <li> to change, and below it a setInterval that triggers programmatic clicks on the elements and thus causes the first part to run. To distinguish the actual click from false I used if (e.which) clearInterval(galeria); . So a real click stops the slide.