我正在处理显示两个数据目标内容的标签（没有问题）。我添加了一个脚本，在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>
请查看codepen。片段有一些问题。 1
答案 0 :(得分：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
试着用它希望它能帮到你。
答案 1 :(得分：1)
您可以使用工作解决方案https://jsfiddle.net/L64s4bxh/2/
if(list1 != '' && list2 != '' && list3 != '' && list4 != ''){
alert("ALL are filled");
return false;
}