Javascript 如何在不单击选项卡的情况下切换选项卡

下面是包含4个选项卡的JS fiddle，如果我单击选项卡，选项卡内容将发生更改。 我只需要使用css/样式交换选项卡，而不需要单击按钮或应用于“选项卡菜单”的任何事件

HTML代码

<div id="tabs-container">
    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
        <li><a href="#tab-4">Tab 4</a></li>
    </ul>
    <div class="tab">
        <div id="tab-1" class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam pretium, est at congue mattis, nibh eros pharetra lectus, nec posuere libero dui consectetur arcu. Quisque convallis facilisis fermentum. Nam tincidunt, diam nec dictum mattis, nunc dolor ultrices ipsum, in mattis justo turpis nec ligula. Curabitur a ante mauris. Integer placerat imperdiet diam, facilisis pretium elit mollis pretium. Sed lobortis, eros non egestas suscipit, dui dui euismod enim, ac ultricies arcu risus at tellus. Donec imperdiet congue ligula, quis vulputate mauris ultrices non. Aliquam rhoncus, arcu a bibendum congue, augue risus tincidunt massa, vel vehicula diam dolor eget felis.</p>
        </div>
        <div id="tab-2" class="tab-content">
            <p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra. </p>

        </div>
        <div id="tab-3" class="tab-content">
            <p>Duis egestas fermentum ipsum et commodo. Proin bibendum consectetur elit, hendrerit porta mi dictum eu. Vestibulum adipiscing euismod laoreet. Vivamus lobortis tortor a odio consectetur pulvinar. Proin blandit ornare eros dictum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur laoreet, ante aliquet molestie laoreet, lectus odio fringilla purus, id porttitor erat velit vitae mi. Nullam posuere nunc ut justo sollicitudin interdum. Donec suscipit eros nec leo condimentum fermentum. Nunc quis libero massa. Integer tempus laoreet lectus id interdum. Integer facilisis egestas dui at convallis. Praesent elementum nisl et erat iaculis a blandit ligula mollis. Vestibulum vitae risus dui, nec sagittis arcu. Nullam tortor enim, placerat quis eleifend in, viverra ac lacus. Ut aliquam sapien ut metus hendrerit auctor dapibus justo porta. </p>
        </div>
        <div id="tab-4" class="tab-content">
            <p>Proin sollicitudin tincidunt quam, in egestas dui tincidunt non. Maecenas tempus condimentum mi, sed convallis tortor iaculis eu. Cras dui dui, tempor quis tempor vitae, ullamcorper in justo. Integer et lorem diam. Quisque consequat lectus eget urna molestie pharetra. Cras risus lectus, lobortis sit amet imperdiet sit amet, eleifend a erat. Suspendisse vel luctus lectus. Sed ac arcu nisi, sit amet ornare tellus. Pellentesque nec augue a nibh pharetra scelerisque quis sit amet felis. Nullam at enim at lacus pretium iaculis sit amet vel nunc. Praesent sapien felis, tincidunt vitae blandit ut, mattis at diam. Suspendisse ac sapien eget eros venenatis tempor quis id odio. Donec lacus leo, tincidunt eget molestie at, pharetra cursus odio. </p>
        </div>
    </div>
</div><br/>
<input type='submit' value='SET Tab 1 Active '/><br/><br/>
<input type='submit' value='SET Tab 2 Active '/><br/><br/>
<input type='submit' value='SET Tab 3 Active '/><br/><br/>
<input type='submit' value='SET Tab 4 Active '/><br/><br/>

---

上面是处理制表符开关的jquery代码段。

我将您的代码移动了一点，但这是为了让它更具可读性

$(function() {
$('.tabs-menu a').mouseover(function(){
   event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();

  });
});

$（文档）.ready（函数（）{
var$tabsMenu=$（'.tabs菜单'）；
var tabsMenuLength=$tabsMenu.children（）.length；
$tabsMenu.find（“a”）。单击（函数（事件）{
event.preventDefault（）；
setCurrentTab（此）；
});
$（“#选项卡开关”）。单击（函数（e）{
var nextTabId=（$tabsMenu.find（'.current'）.index（）+1）%tabsMenuLength；
setCurrentTab（$tabsMenu.children（）[nextTabId].childNodes[0]）
});
//将初始选项卡设置为选项卡3
setCurrentTab（$tabsMenu.children（）[2].childNodes[0]）
});
函数设置当前选项卡（选项卡）{
$（tabEl.parent（）.addClass（“当前”）；
$（tabEl.parent（）.sibles（）.removeClass（“当前”）；
var tab=$（tabEl.attr（“href”）；
$（“.tab内容”）.not（tab.css（“显示”、“无”）；
$（tab.fadeIn（）；
}

正文{
填充：20px；
字体系列：Arial、Helvetica、无衬线字体；
线高：1.5；
字体大小：14px；
}
.选项卡菜单{
高度：30px；
浮动：左；
明确：两者皆有；
}
.标签菜单李{
高度：30px；
线高：30px；
浮动：左；
右边距：10px；
背景色：#ccc；
边框顶部：1px实心#d4d1；
右边框：1px实心#d4d1；
左边框：1px实心#d4d1；
}
.tabs菜单li.current{
位置：相对位置；
背景色：#fff；
边框底部：1px实心#fff；
z指数：5；
}
.标签菜单李a{
填充：10px；
文本转换：大写；
颜色：#fff；
文字装饰：无；
}
.选项卡菜单.当前a{
颜色：#2e7da3；
}
.标签{
边框：1px实心#d4d1；
背景色：#fff；
浮动：左；
边缘底部：20px；
宽度：自动；
}
.选项卡内容{
宽度：660px；
填充：20px；
显示：无；
}
#表1{
显示：块；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。阿利奎姆坐在阿梅特·普鲁斯·乌尔纳旁边。在弗林尼利亚·埃尼姆的名言中，坐在阿梅特·苏西比特·多洛的名言中。梅塞纳·波特提托、埃斯特和马莱苏阿达·康格、利古拉·艾尔特·马萨发酵液、埃斯特·波特·奥迪奥
在维利特。塞德·内克·特皮斯·内克。在我的猫咪身上，我被折磨着。在康格·马蒂斯（congue mattis）、尼伯·厄罗斯·法雷特拉·莱克图斯（nibh eros pharetra lectus）、nec posuere libero dui Concertetur arcu（nec posuere libero dui）等地，都有一个空。快速发酵法。不，不，不
mattis，nunc dolor ultrices ipsum，在mattis justo turpis nec ligula中。库拉比图尔·安特·莫里斯。整粒径，易裂前叶，易裂前叶。他是一个很好的人，他是一个很好的人
泰勒斯的拱门。请不要把食物放在舌苔上，而不要把它放在酒杯上。朗卡斯之家，康格之家，马萨之家，猫科动物之家

不，不，不，不。在威尼斯的索利西图丁港口。佩伦特斯凯坐在阿梅特·马萨和奥奇·马莱苏阿达的面前。艾蒂安·特里斯蒂克·帕特·奥克托。Morbi nec massa eget sem ultricies
酵母菌叶舌。请说出自己的名言。在侵权人身上悬挂贵宾酒牌。整数福西布斯·因特杜姆·胡斯托（justo），马蒂斯·康莫（mattis commodo elit Temporal id.Quisque ut orci orci），坐在阿梅特·马蒂斯·努拉（amet mattis nulla）旁边。乌拉姆科珀的封建王朝的Suspendisse quam diam
埃吉特，射手座的爱神。普罗因·托托·泰卢斯，普尔维纳在年的帝国饮食，埃吉斯塔·塞德·尼塞尔。这是一种暂时的生活方式

两种发酵剂都是发酵的。这是一项卓越的事业，也是一项重要的事业。前庭平洞euismod laoreet。普尔维纳尔圣殿酒店。勃朗地黄花蛇舌草发酵素。等级
每一个科努比亚·诺斯特拉，每一个希梅纳厄斯的接受者，都有一个敏捷的社会秩序。拉奥里特馆长、拉奥里特律师事务所律师、普卢斯律师事务所律师、埃拉特·维利特·维塔米律师事务所律师。这是一个非常重要的问题。
Donec suscipit Peros nec leo调味品发酵液。努克·奎斯·马萨自由女神。整数tempus laoreet lectus id interdum。convallis的整型设施是egestas dui。一种温和的软舌苔。生命前庭
里苏斯酒后驾车，内切矢状弓。无托尔托尔埃尼，无托尔托尔埃尼，无托尔托尔托尔埃利芬，无托尔托尔埃利芬，无托尔托尔埃尼姆，无托尔托尔托尔埃尼姆，无托尔托尔托尔埃尼，无托尔托尔托尔埃利。我们都是智者，我们都是亨德雷特拍卖人

在锡西顿广场，在埃吉斯塔对决锡西顿非。米塞纳斯坦波斯调味品，欧洲玉米饼。酒后驾车，临时生活，胡斯托的乌兰科佩尔。整数和直径。选举委员会征服者
乌娜·莫莱斯蒂·法雷特拉。我要做的是，我要做的是，我要做的是，我要做的是，我要做的是，我要做的是。悬钩子。我坐在那里，坐在那里。佩伦茨克的nec奥古斯一尼布法雷特拉权杖奎斯坐在阿梅特猫。
在埃尼姆，在亚库利斯湖，这是一个很好的例子。普莱森特·萨皮恩·费利斯、维塔·布兰迪特·乌特、马蒂斯·迪亚姆。这是一种暂时性的死亡。Donec lacus leo，tincidunt eget molestie at，pharetra
卡苏斯·奥迪奥



更改选项卡

我将您的代码移动了一点，但这是为了让它更可读

$（文档）.ready（函数（）{
var$tabsMenu=$（'.tabs菜单'）；
var tabsMenuLength=$tabsMenu.children（）.length；
$tabsMenu.find（“a”）。单击（函数（事件）{
event.preventDefault（）；
setCurrentTab（此）；
});
$（“#选项卡开关”）。单击（函数（e）{
var nextTabId=(
var SimpleTabs = function (elem) {
    //get tab objects and store as pane + tab
    var activeTabObject;

    var TabObject = function () {

        var self = this;
        this.tab; //element
        this.pane; //element
        this.setClick = function () {
            $(self.tab).click(function () {
                self.showThisTab();
            });
        };

        this.showThisTab = function () {
            if (self !== activeTabObject) {

                //change the tab page and update the active tab
                $(activeTabObject.pane).removeClass('active-page');
                $(activeTabObject.tab).removeClass('active');
                $(self.pane).addClass('active-page');
                $(self.tab).addClass('active');
                activeTabObject = self;
            }
        };

    };

    $.each(elem.children(), function (id,val){
        var tab = new TabObject();
        tab.tab = val;
        var classString = $(val).attr('class');
        var className = classString.split(' ')[0];
        tab.pane = $('#' + className);
        tab.setClick();
        if (classString.indexOf('active') > -1) {
            activeTabObject = tab;
        }
    });

};

$(function() {
$('.tabs-menu a').mouseover(function(){
   event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();

  });
});