0

我有使用 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 没有效果。请帮助我了解我所缺少的。谢谢

4

2 回答 2

0

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

看看这个小提琴

我把你的小提琴弄了很多。使用 jQuery 删除了不必要的功能等。我没有对你的 css 胡思乱想，但是我确实从你的 html 中删除了 body 标签，因为 jsfiddle 已经为你提供了一个 body 标签。

要在页面加载时运行您的 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();
}

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

希望能帮助到你！

于 2013-09-12T17:03:59.530 回答
0

演示

 $(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;
        });
    });
于 2013-09-12T17:38:10.120 回答