Question

我有使用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没有效果。请帮我理解我错过的东西。感谢

Answer 1

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

CHECK OUT THIS FIDDLE

我稍微调了一下你的小提琴。使用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();
}

我认为我已经对其余代码进行了充分的评论，以便了解正在发生的事情，但如果您对其工作方式有任何问题或疑虑，请告知我们。

希望它有所帮助！

Answer 2

Demo

 $(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;
        });
    });

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

2 个答案: