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

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

我的代码在下面的JSFiddle中。（我不知道如何添加'body onload=“init（）'标记，因此JSFIDLE功能不完全。请查看代码）

我尝试使用以下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);
});

$（函数（）{
//缓存对选项卡的引用
var tabs=$（“#tabs li”）；
//在“单击到选项卡”上，将其打开，然后关闭以前的“选项卡”
tabs.click（function（）{$（this）.addClass（'on'）。同胞（'.on'））。removeClass（'on'）；}）；
//每5秒自动旋转一次
setInterval（函数（）{
//当前处于选项卡上
var onTab=tabs.filter（'.on'）；
//单击下一个选项卡（如果存在），否则单击第一个选项卡
var nextTab=onTab.index（）

---

但是，我还不能理解为什么JQuery没有效果。请帮助我理解我缺少了什么。谢谢，既然你说你在使用JQuery，那就让我们充分利用它吧

我对你的提琴做了很多修改。通过使用jQuery删除了不必要的函数等。我没有使用你的css，但是我确实从你的html中删除了body标记，因为JSFIDLE已经为你提供了body标记

要在页面加载时运行init，我必须指定javascript块的执行方式就像它在body标记中一样（设置为JSFIDLE），并包含以下代码行，这与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();
}

函数init（）{
//从页面抓取选项卡链接和内容div
var tabListItems=$（“#tabs li”）；
//循环浏览所有标签
$（'#tabs li'）。每个（函数（i，ele）{
//将单击/焦点事件分配给选项卡定位/链接
var tabLink=$（this.find（'a'）。on（'click'，showTab.）。on（'focus'，function（）{$（this.blur（）；}）；
var tabBody=$（$（tabLink.attr（'href'））；
//突出显示第一个选项卡
如果（i==0）$（tabLink）.addClass（'selected'）；
//隐藏除第一个以外的所有内容div
如果（i！=0）$（tabBody.hide（）；
});
//每4秒自动旋转一次
setInterval（函数（）{
var selectedTab=$（“#tabs”）.find（'li.on'）；
var index=$（selectedTab.index（）；
如果（索引<$（'#制表符'）。查找（'li'）。长度-1）
索引++；
其他的
指数=0；
$（'#制表符'）。查找（'li:eq（'+index+'）a'）。单击（）；
}, 4000);
}
功能显示选项卡（e）{
//防止默认锚定/链接操作
e、 预防默认值（）；
var selectedId=$（this.attr（'href'）；
//从所有标签li标记中删除“开”类
$（“#制表符”）.find（'li'）.removeClass（'on'）；
//从所有选项卡锚定/链接中删除“选定”类
$（“#制表符”）.find（'a.selected'）.removeClass（'selected'）；
//将“on”类添加到所选选项卡li标记
$（this）.closest（'li'）.addClass（'on'）；
//添加所选类
$（this.addClass（'selected'）；
//隐藏所有选项卡主体
$（'div.tabContent'）.hide（）；
//显示所选选项卡正文
$（selectedId.show（）；
}

我认为我已经对代码的其余部分进行了很好的注释，足以理解正在发生的事情。但是，如果您对它的工作方式有任何疑问或担忧，请让我知道

希望有帮助！

---

在firefox V23上，它（你的小提琴）似乎对我有效。请参考此内容。我不确定如何在html上添加“body onload=“init（）”标记，因此js函数无效Hello@Ryan，我是JQuery新手，它让任务变得更加简单，这让我感到非常惊讶。我正在尝试在Visual Studio 2012中使用您的JQuery，并将其部署为SharePoint 2010上的一个Web部件。由于某种原因，setInterval（函数（）{}似乎没有任何效果。@Sagarika我不知道为什么或者如何阻止代码工作，只要您在示例标记中指定的所有html结构、ID和类没有更改。也许在.NET生成页面时检查页面的源代码，并确认标记正是您在示例js fiddle中的标记？Addit从总体上说，你把脚本块和我提供的代码放在了代码中的什么地方？此外，由于你是jQuery新手，我理解、尊重并欣赏你正在滚动自己的标签实现，而不是试图重新发明轮子，我建议你看看jQuery UI。它是一个UI js框架构建在jQuery之上。请在此处查看它们的选项卡实现@Ryan，我正试图在Visual Studio 2012中使用您的jQuery，并将其作为SharePoint 2010上的Web部件进行部署。出于某种原因，setInterval（函数（）{}似乎没有任何效果。但是，当我使用Visual Studio并在浏览器上运行它时，我可以看到效果，而无需SharePoint的干预

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