使用 JavaScript 和 Jquery 在选项卡之间自动导航

Auto Navigate between tabs using using JavaScript and Jquery

本文关键字：之间 导航 选项 JavaScript Jquery 使用      更新时间：2023-09-26

我有使用HTML，css和纯Javascript创建选项卡的代码。现在，我希望能够每 4 秒在这些选项卡之间切换一次。

我的代码在下面的JSFiddle中。（我不知道如何添加一个"body onload="init（）"标签，因此 JsFiddle 不能完全正常工作。请看一下代码）
http://jsfiddle.net/qjmDU/1/

我正在尝试使用以下 JQuery 在选项卡之间切换

$(function () {
    //cache a reference to the tabs
    var tabs = $('#tabs li');
    //on click to tab, turn it on, and turn previously-on tab off
    tabs.click(function () { $(this).addClass('on').siblings('.on').removeClass('on'); });
    //auto-rotate every 5 seconds
    setInterval(function () {
        //get currently-on tab
        var onTab = tabs.filter('.on');
        //click either next tab, if exists, else first one
        var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();
        nextTab.click();
    }, 4000);
});

但是，一直无法弄清楚为什么JQuery没有效果。请帮助我了解我缺少什么。谢谢

嘿，

既然你说你正在使用jQuery，让我们充分利用它......

看看这个小提琴

我经常小提琴。通过使用jQuery删除了不必要的函数等。我没有使用你的 css，但我确实从你的 html 中删除了正文标签，因为 jsfiddle 已经为您提供了一个正文标签。

要在页面加载时运行您的 init，我必须指定您的 javascript 块执行就像在您的 body 标签（jsfiddle 的设置）中一样，并包含以下代码行，这几乎等同于 body.onload：

$(window).load(init);

以下是使用大量 jQuery 重写的函数：

function init() {
    // Grab the tab links and content divs from the page
    var tabListItems = $('#tabs li');
    // loop through all tab li tags
    $('#tabs li').each(function(i, ele){
        // Assign click/focus events to the tab anchor/links
        var tabLink = $(this).find('a').on('click', showTab).on('focus', function () { $(this).blur(); });
        var tabBody = $($(tabLink).attr('href'));
        // highlight the first tab
        if (i == 0) $(tabLink).addClass('selected');
        // hide all the content divs but the first
        if (i != 0) $(tabBody).hide();
    });
    //auto-rotate every 4 seconds
    setInterval(function () {
        var selectedTab = $('#tabs').find('li.on');
        var index = $(selectedTab).index();
        if (index < $('#tabs').find('li').length - 1)
            index++;
        else
            index = 0;
        $('#tabs').find('li:eq('+index+') a').click();
    }, 4000);
}
function showTab(e) {
    // prevent default anchor/link action
    e.preventDefault();
    var selectedId = $(this).attr('href');
    // remove 'on' class from all tab li tags
    $('#tabs').find('li').removeClass('on');
    // remove 'selected' class from all tab anchors/links
    $('#tabs').find('a.selected').removeClass('selected');
    // add 'on' class to selected tab li tag
    $(this).closest('li').addClass('on');
    // add selected class 
    $(this).addClass('selected');
    // hide all tab bodies
    $('div.tabContent').hide();
    // show selected tab body
    $(selectedId).show();
}

我想我已经很好地注释了代码的其余部分，足以理解发生了什么，但是如果您对它的工作原理有任何疑问或疑虑，请告诉我。

希望对您有所帮助！

演示

 $(document).ready(function () {
        var timeInterval, tabCount = 0, currnetIndex = 1;
        tabCount = $('ul#tabs').find('li a').length;
        var tabContentObj = $('.tabContent');
        changeTabIndex();
        timeInterval = setInterval(function () { changeTabIndex(); }, 4 * 1000);
        function changeTabIndex() {
            if (currnetIndex > tabCount) {
                currnetIndex = 1;
            }
            tabContentObj.hide();
            $('ul#tabs').find('li.selected').removeClass('selected');
            var currentAncorObj = $('ul#tabs').find('li a').eq(currnetIndex - 1);
            currentAncorObj.parent().addClass('selected');
            $(currentAncorObj.attr('href')).show();
            currnetIndex++;
        };
        $('#tabs li').mouseenter(function () {
            clearInterval(timeInterval);
        }).mouseleave(function () {
            timeInterval = setInterval(function () { changeTabIndex(); }, 4 * 1000);
        });
        $('#tabs li a').click(function () {
            //tabContentObj.hide();
            //$('ul#tabs').find('li.selected').removeClass('selected');
            //var currentAncorObj = $(this);
            //currnetIndex = $('ul#tabs').find('li a').index($(this)) + 1;
            //currentAncorObj.parent().addClass('selected');
            //$(currentAncorObj.attr('href')).show();
            //currnetIndex++;

            //Or
            currnetIndex = $('ul#tabs').find('li a').index($(this)) + 1;
            changeTabIndex();
            //return false;
        });
    });
相关文章：