我正在使用显示两个数据目标内容的选项卡(没有问题)。我添加了一个脚本，它会在 5 秒后自动更改选项卡。选项卡发生更改，但选项卡内容不显示。我不知道为什么。任何帮助，将不胜感激。谢谢。
$(document).ready(function () {
var timeInterval, currnetIndex = 1;
tabCount = 5;
var tabContentObj = $('.tab-content');
changeTabIndex();
timeInterval = setInterval(function () { changeTabIndex(); }, 4 * 1000);
function changeTabIndex() {
if (currnetIndex > tabCount) {
currnetIndex = 1;
}
tabContentObj.hide();
$('ul#myTab').find('li.active').removeClass('active');
var currentAncorObj = $('ul#myTab').find('li a').eq(currnetIndex - 1);
currentAncorObj.parent().addClass('active');
$(currentAncorObj.attr('href')).show();
currnetIndex++;
};
$('#myTab li').mouseenter(function () {
clearInterval(timeInterval);
}).mouseleave(function () {
timeInterval = setInterval(function () { changeTabIndex(); }, 4 * 1000);
});
$('#myTab li a').click(function () {
tabContentObj.hide();
$('ul#myTab').find('li.active').removeClass('active');
var currentAncorObj = $(this);
currnetIndex = $('ul#myTab').find('li a').index($(this)) + 1;
currentAncorObj.parent().addClass('active');
$(currentAncorObj.attr('href')).show();
currnetIndex++;
//return false;
});
});.how-it-works {
padding-bottom: 30px;
}
.board .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
box-sizing: border-box;
}
.board > div.board-inner > .nav-tabs {
border: none;
}
p.narrow{
width: 60%;
margin: 10px auto;
}
.liner{
height: 2px;
background: #ddd;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
outline: 0;
}
span.round-tabs{
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tabs.one{
border: 2px solid #ddd;
color: #ddd;
}
li.active span.round-tabs.one, li.active span.round-tabs.two, li.active span.round-tabs.three, li.active span.round-tabs.four, li.active span.round-tabs.five{
background: #36ABE7 !important;
border: 2px solid #2AC7CC;
color: #fff;
}
span.round-tabs,.two{
border: 2px solid #ddd;
color: #ddd;
}
span.round-tabs,.three{
border: 2px solid #ddd;
color: #ddd;
}
span.round-tabs,.four{
border: 2px solid #ddd;
color: #ddd;
}
span.round-tabs,.five{
border: 2px solid #ddd;
color: #ddd;
}
.nav-tabs > li.active > a.span.round-tabs{
background: #fafafa;
}
.nav-tabs > li{
width: 20%;
}
.nav-tabs > li a{
width: 70px;
height: 70px;
margin: 0px auto;
border-radius: 100%;
padding: 0;
}
.nav-tabs > li a:hover{
background: transparent;
}
.tab-pane{
position: relative;
padding-top: 50px;
}
.btn-outline-rounded{
padding: 10px 40px;
margin: 20px 0;
border: 2px solid transparent;
border-radius: 25px;
}
.btn.green{
background-color: #69cb95;
color: #fff;
}
@media(max-width: 585px){
.board{
width: 90%;
height: auto !important;
}
span.round-tabs{
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.tab-content.head{
font-size:20px;
}
.nav-tabs > li a{
width: 50px;
height: 50px;
line-height: 50px;
}
li.active:after{
content:"";
position: absolute;
left: 35%;
}
.btn-outline-rounded{
padding: 12px 20px;
}
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "third-layer">
<h1 class = "home-title" data-aos = "fade-right"><b>Our Services</b></h1>
<section class="section how-it-works" id="how-it-works">
<div class="container">
<div class="row text-center">
<div class="how-it-works-heading">
<div class="tab-content">
<div class="tab-pane fade in" id="home" data-aos = "fade-left">
<h2 class="section-title">Service Title 1</h2>
</div>
<div class="tab-pane fade in" id="profile">
<h2 class="section-title">Service Title 2</h2>
</div>
<div class="tab-pane fade in" id="prototyping">
<h2 class="section-title">Service Title 3</h2>
</div>
<div class="tab-pane fade in" id="uidesign">
<h2 class="section-title">Service Title 4</h2>
</div>
<div class="tab-pane fade in" id="doner">
<h2 class="section-title">Service Title 5</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 board">
<div class="board-inner" data-aos = "flip-up">
<ul class="nav nav-tabs" id="myTab">
<div class="liner"></div>
<li>
<a href="#home" data-target="#home, #home1" aria-controls="home" role="tab" data-toggle="tab" title="User Experience">
<span class="round-tabs one">
<i class="icon icon-profile-male"></i>
</span>
</a></li>
<li><a href="#profile" data-target="#profile, #profile1" aria-controls="profile" role="tab" data-toggle="tab" title="Sketch">
<span class="round-tabs two">
<i class="icon icon-pencil"></i>
</span>
</a>
</li>
<li><a href="#prototyping" data-target="#prototyping, #prototyping1" aria-controls="prototyping" role="tab" data-toggle="tab" title="Prototyping">
<span class="round-tabs three">
<i class="icon icon-layers"></i>
</span> </a>
</li>
<li><a href="#uidesign" data-target="#uidesign, #uidesign1" aria-controls="uidesign" role="tab" data-toggle="tab" title="UI Design">
<span class="round-tabs four">
<i class="icon icon-aperture"></i>
</span>
</a></li>
<li><a href="#doner" data-target="#doner, #doner1" aria-controls="doner" role="tab" data-toggle="tab" title="Development">
<span class="round-tabs five">
<i class="icon icon-tools-2"></i>
</span> </a>
</li>
</ul></div>
<div class="tab-content">
<div class="tab-pane fade in" id="home1">
<div class = "container">
<div class = "row">
<div class = "col-sm-6 board-container" data-aos="flip-up">
<div class="boardd" style = "height:300px;"></div>
</div>
<div class = "col-sm-6 second-layer-list" style = "padding:40px;" data-aos = "fade-left">
<font size = "4"><center>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget viverra sem. Curabitur lobortis bibendum odio ac varius. Ut non felis varius, viverra nibh vel, luctus neque. Nullam eget ante a felis lacinia convallis. Vestibulum varius metus sit amet aliquam convallis. Pellentesque vel venenatis justo. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.</center></font>
<p class="text-center">
<a href="" class="btn btn-primary btn-outline-rounded blue" style = "background-color:#36ABE7;" data-aos="fade-left"> Know More <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile1" data-aos="flip-up">
<div class = "container">
<div class = "row">
<div class = "col-sm-6 board-container" data-aos="flip-up">
<div class="boardd" style = "height:300px;"></div>
</div>
<div class = "col-sm-6 second-layer-list" style = "padding:40px;" data-aos = "fade-left">
<font size = "4"><center>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget viverra sem. Curabitur lobortis bibendum odio ac varius. Ut non felis varius, viverra nibh vel, luctus neque. Nullam eget ante a felis lacinia convallis. Vestibulum varius metus sit amet aliquam convallis. Pellentesque vel venenatis justo. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.</center></font>
<p class="text-center">
<a href="" class="btn btn-primary btn-outline-rounded blue" data-aos="fade-left"> Know More <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="prototyping1" data-aos="flip-up">
<div class = "container">
<div class = "row">
<div class = "col-sm-6 board-container" data-aos="flip-up">
<div class="boardd" style = "height:300px;"></div>
</div>
<div class = "col-sm-6 second-layer-list" style = "padding:40px;" data-aos = "fade-left">
<font size = "4"><center>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget viverra sem. Curabitur lobortis bibendum odio ac varius. Ut non felis varius, viverra nibh vel, luctus neque. Nullam eget ante a felis lacinia convallis. Vestibulum varius metus sit amet aliquam convallis. Pellentesque vel venenatis justo. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.</center></font>
<p class="text-center">
<a href="" class="btn btn-primary btn-outline-rounded blue" data-aos="fade-left"> Know More <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="uidesign1" data-aos="flip-up">
<div class = "row">
<div class = "col-sm-6 board-container" data-aos="flip-up">
<div class="boardd" style = "height:300px;"></div>
</div>
<div class = "col-sm-6 second-layer-list" style = "padding:40px;" data-aos = "fade-left">
<font size = "4"><center>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget viverra sem. Curabitur lobortis bibendum odio ac varius. Ut non felis varius, viverra nibh vel, luctus neque. Nullam eget ante a felis lacinia convallis. Vestibulum varius metus sit amet aliquam convallis. Pellentesque vel venenatis justo. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.</center></font>
<p class="text-center">
<a href="" class="btn btn-primary btn-outline-rounded blue" data-aos="fade-left"> Know More <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="doner1" data-aos="flip-up">
<div class = "container">
<div class = "row">
<div class = "col-sm-6 board-container" data-aos="flip-up">
<div class="boardd" style = "height:300px;"></div>
</div>
<div class = "col-sm-6 second-layer-list" style = "padding:40px;" data-aos = "fade-left">
<font size = "4"><center>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget viverra sem. Curabitur lobortis bibendum odio ac varius. Ut non felis varius, viverra nibh vel, luctus neque. Nullam eget ante a felis lacinia convallis. Vestibulum varius metus sit amet aliquam convallis. Pellentesque vel venenatis justo. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.</center></font>
<p class="text-center">
<a href="" class="btn btn-primary btn-outline-rounded blue" data-aos="fade-left"> Know More <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
</div>请查看代码笔。片段有一些问题。 1
最佳答案
在 jQuery 中更改此行
应该是这样的
var tabContentObj = $('.tab-content .tab-pane');
原来是
var tabContentObj = $('.tab-content');
您隐藏了整个 tab-content div 您必须只隐藏 tab-pane div
编辑
替换此行
$(currentAncorObj.attr('href')).show();
有了这个
$(currentAncorObj.attr('data-target')).show().addClass("in");
在此之前，您只显示 href 元素，您必须显示 data-target 属性中的两个元素，并且还要显示 in 中的添加类>.
<强> DEMO
尝试一下希望对你有帮助。
关于jquery - 选项卡内容未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44984668/