开发者

jQuery Cycle Effect on Tabs

开发者 https://www.devze.com 2023-03-09 20:41 出处:网络
Hi I have a built this Jquery code. I want the buttons to auto cycle insted of hovering can anyone help please?

Hi I have a built this Jquery code.

I want the buttons to auto cycle insted of hovering can anyone help please?

Jquery code is as follows:

$(function() {
  var $items = $('#vtab>ul>li');
  $items.click(function() {
    $items.removeClass('selected');
    $(this).addClass('selected');
    var index = $items.index($(this));
    $('#vtab>div').hide().eq(index).show();
  }).eq(1).mouseover();
});

The Html is as follows:

<div id="vtab">
  <ul>
    <li class="home selected"><开发者_如何学Python/li>
    <li class="login"></li>
    <li class="support"></li>
  </ul>
  <div>
    <h4>Home Insurance</h4>
  </div>
  <div>
    <h4>Secure Login</h4>
    <form id="loginForm" action="">
      <fieldset>
        <legend>You need to sign in with your Email & Password to continue.</legend>
        <div>
          <label for="email">Email:</label>
          <input type="text" name="email" id="email" />
        </div>
        <div>
          <label for="password">Password:</label>
          <input type="password" name="password" id="password" />
        </div>
        <div>
          <input id="login" type="submit" value="Fake Login" />
        </div>
      </fieldset>
    </form>
  </div>
  <div>
    <h4>Online Support</h4>
    Maecenas in varius nulla....
  </div>
</div>

I want the buttons to cycle through rather than just when you hover


It appears you want to automatically cycle through a set of tabs. Fortunately, the jQuery UI team has provided us with a great tool call Tabs that can do just this. More specifically, there's a method in Tabs called .rotate() which will allow you to provide and interval (in ms) and a command to repeat the cycle once it has finished.

The example code provided on the Tabs page resembles your code very closely, which should make it relatively painless to implement the jQuery UI solution.


can't see your page. Can you re-post the url?

I have built one here. Take a look and see is that what you want: http://www.castlerockinvestments.ca/dev/index_banner.jsp

If that's what you want, you might need to change the source code yourself because I ch. The writer of JQuery cycle got sample code for a lot of option there. I assume you see them all already : http://jquery.malsup.com/cycle/pager-over.html

0

精彩评论

暂无评论...
验证码 换一张
取 消