1
我正在使用显示两个数据目标的内容的标签（没有问题）。我添加了一个脚本，在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++;
\t \t \t \t
};
$('#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 {
\t padding-bottom: 30px;
}
.board .nav-tabs {
\t position: relative;
\t margin: 40px auto;
\t margin-bottom: 0;
\t box-sizing: border-box;
}
.board > div.board-inner > .nav-tabs {
\t border: none;
}
p.narrow{
\t width: 60%;
\t margin: 10px auto;
}
.liner{
\t height: 2px;
\t background: #ddd;
\t position: absolute;
\t width: 80%;
\t margin: 0 auto;
\t left: 0;
\t right: 0;
\t top: 50%;
\t z-index: 1;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
\t color: #555555;
\t cursor: default;
\t border: 0;
\t border-bottom-color: transparent;
\t outline: 0;
}
span.round-tabs{
\t width: 70px;
\t height: 70px;
\t line-height: 70px;
\t display: inline-block;
\t border-radius: 100px;
\t background: white;
\t z-index: 2;
\t position: absolute;
\t left: 0;
\t text-align: center;
\t font-size: 25px;
}
span.round-tabs.one{
\t border: 2px solid #ddd;
\t 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{
\t background: #36ABE7 !important;
\t border: 2px solid #2AC7CC;
\t color: #fff;
}
span.round-tabs,.two{
\t border: 2px solid #ddd;
\t color: #ddd;
}
span.round-tabs,.three{
\t border: 2px solid #ddd;
\t color: #ddd;
}
span.round-tabs,.four{
\t border: 2px solid #ddd;
\t color: #ddd;
}
span.round-tabs,.five{
\t border: 2px solid #ddd;
\t color: #ddd;
}
.nav-tabs > li.active > a.span.round-tabs{
\t background: #fafafa;
}
.nav-tabs > li{
\t width: 20%;
}
.nav-tabs > li a{
\t width: 70px;
\t height: 70px;
\t margin: 0px auto;
\t border-radius: 100%;
\t padding: 0;
}
.nav-tabs > li a:hover{
\t background: transparent;
}
.tab-pane{
\t position: relative;
\t padding-top: 50px;
}
.btn-outline-rounded{
\t padding: 10px 40px;
\t margin: 20px 0;
\t border: 2px solid transparent;
\t border-radius: 25px;
}
.btn.green{
\t background-color: #69cb95;
\t color: #fff;
}
@media(max-width: 585px){
\t .board{
\t \t width: 90%;
\t \t height: auto !important;
\t }
\t span.round-tabs{
\t \t font-size: 16px;
\t \t width: 50px;
\t \t height: 50px;
\t \t line-height: 50px;
\t }
\t .tab-content.head{
\t \t font-size:20px;
\t }
\t .nav-tabs > li a{
\t \t width: 50px;
\t \t height: 50px;
\t \t line-height: 50px;
\t }
\t li.active:after{
\t \t content:"";
\t \t position: absolute;
\t \t left: 35%;
\t }
\t .btn-outline-rounded{
\t \t padding: 12px 20px;
\t }
}<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">
\t \t \t <h1 class = "home-title" data-aos = "fade-right"><b>Our Services</b></h1>
\t \t \t <section class="section how-it-works" id="how-it-works">
\t \t \t \t <div class="container">
\t \t \t \t \t <div class="row text-center">
\t \t \t \t \t \t <div class="how-it-works-heading">
\t \t \t \t \t \t \t <div class="tab-content">
\t \t \t \t \t \t \t \t \t <div class="tab-pane fade in" id="home" data-aos = "fade-left">
\t \t \t \t \t \t \t \t \t \t <h2 class="section-title">Service Title 1</h2>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="tab-pane fade in" id="profile">
\t \t \t \t \t \t \t \t \t \t <h2 class="section-title">Service Title 2</h2>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="tab-pane fade in" id="prototyping">
\t \t \t \t \t \t \t \t \t \t <h2 class="section-title">Service Title 3</h2>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="tab-pane fade in" id="uidesign">
\t \t \t \t \t \t \t \t \t \t <h2 class="section-title">Service Title 4</h2>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="tab-pane fade in" id="doner">
\t \t \t \t \t \t \t \t \t \t <h2 class="section-title">Service Title 5</h2>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="row">
\t \t \t \t \t \t <div class="col-md-12 board">
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <div class="board-inner" data-aos = "flip-up">
\t \t \t \t \t \t \t \t <ul class="nav nav-tabs" id="myTab">
\t \t \t \t \t \t \t \t \t <div class="liner"></div>
\t \t \t \t \t \t \t \t \t <li>
\t \t \t \t \t \t \t \t \t \t <a href="#home" data-target="#home, #home1" aria-controls="home" role="tab" data-toggle="tab" title="User Experience">
\t \t \t \t \t \t \t <span class="round-tabs one">
\t \t \t \t \t \t \t \t \t <i class="icon icon-profile-male"></i>
\t \t \t \t \t \t \t </span>
\t \t \t \t \t \t \t \t \t \t </a></li>
\t \t \t \t \t \t \t \t \t <li><a href="#profile" data-target="#profile, #profile1" aria-controls="profile" role="tab" data-toggle="tab" title="Sketch">
\t \t \t \t \t \t \t <span class="round-tabs two">
\t \t \t \t \t \t \t \t <i class="icon icon-pencil"></i>
\t \t \t \t \t \t \t </span>
\t \t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t \t \t </li>
\t \t \t \t \t \t \t \t \t <li><a href="#prototyping" data-target="#prototyping, #prototyping1" aria-controls="prototyping" role="tab" data-toggle="tab" title="Prototyping">
\t \t \t \t \t \t \t <span class="round-tabs three">
\t \t \t \t \t \t \t \t <i class="icon icon-layers"></i>
\t \t \t \t \t \t \t </span> </a>
\t \t \t \t \t \t \t \t \t </li>
\t \t \t \t \t \t \t \t \t <li><a href="#uidesign" data-target="#uidesign, #uidesign1" aria-controls="uidesign" role="tab" data-toggle="tab" title="UI Design">
\t \t \t \t \t \t \t \t <span class="round-tabs four">
\t \t \t \t \t \t \t \t \t <i class="icon icon-aperture"></i>
\t \t \t \t \t \t \t \t </span>
\t \t \t \t \t \t \t \t \t </a></li>
\t \t \t \t \t \t \t \t \t <li><a href="#doner" data-target="#doner, #doner1" aria-controls="doner" role="tab" data-toggle="tab" title="Development">
\t \t \t \t \t \t \t \t <span class="round-tabs five">
\t \t \t \t \t \t \t \t \t <i class="icon icon-tools-2"></i>
\t \t \t \t \t \t \t \t </span> </a>
\t \t \t \t \t \t \t \t \t </li>
\t \t \t \t \t \t \t \t </ul></div>
\t \t \t \t \t \t \t <div class="tab-content">
\t \t \t \t \t \t \t \t <div class="tab-pane fade in" id="home1">
\t \t \t \t \t \t \t \t \t <div class = "container">
\t \t \t \t \t \t \t \t \t \t <div class = "row">
\t \t \t \t \t \t \t \t \t \t \t <div class = "col-sm-6 board-container" data-aos="flip-up">
\t \t \t \t \t \t \t \t \t \t \t \t <div class="boardd" style = "height:300px;"></div>
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t <div class = "col-sm-6 second-layer-list" style = "padding:40px;" data-aos = "fade-left">
\t \t \t \t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t \t \t \t \t <p class="text-center">
\t \t \t \t \t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t \t \t \t \t </p>
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="tab-pane fade" id="profile1" data-aos="flip-up">
\t \t \t \t \t \t \t \t \t <div class = "container">
\t \t \t \t \t \t \t \t \t \t <div class = "row">
\t \t \t \t \t \t \t \t \t \t \t <div class = "col-sm-6 board-container" data-aos="flip-up">
\t \t \t \t \t \t \t \t \t \t \t \t <div class="boardd" style = "height:300px;"></div>
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t <div class = "col-sm-6 second-layer-list" style = "padding:40px;" data-aos = "fade-left">
\t \t \t \t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t \t \t \t \t <p class="text-center">
\t \t \t \t \t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t \t \t \t \t </p>
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="tab-pane fade" id="prototyping1" data-aos="flip-up">
\t \t \t \t \t \t \t \t \t <div class = "container">
\t \t \t \t \t \t \t \t \t \t <div class = "row">
\t \t \t \t \t \t \t \t \t \t \t <div class = "col-sm-6 board-container" data-aos="flip-up">
\t \t \t \t \t \t \t \t \t \t \t \t <div class="boardd" style = "height:300px;"></div>
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t <div class = "col-sm-6 second-layer-list" style = "padding:40px;" data-aos = "fade-left">
\t \t \t \t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t \t \t \t \t <p class="text-center">
\t \t \t \t \t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t \t \t \t \t </p>
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="tab-pane fade" id="uidesign1" data-aos="flip-up">
\t \t \t \t \t \t \t \t \t <div class = "row">
\t \t \t \t \t \t \t \t \t \t \t <div class = "col-sm-6 board-container" data-aos="flip-up">
\t \t \t \t \t \t \t \t \t \t \t \t <div class="boardd" style = "height:300px;"></div>
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t <div class = "col-sm-6 second-layer-list" style = "padding:40px;" data-aos = "fade-left">
\t \t \t \t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t \t \t \t \t <p class="text-center">
\t \t \t \t \t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t \t \t \t \t </p>
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="tab-pane fade" id="doner1" data-aos="flip-up">
\t \t \t \t \t \t \t \t \t <div class = "container">
\t \t \t \t \t \t \t \t \t \t <div class = "row">
\t \t \t \t \t \t \t \t \t \t \t <div class = "col-sm-6 board-container" data-aos="flip-up">
\t \t \t \t \t \t \t \t \t \t \t \t <div class="boardd" style = "height:300px;"></div>
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t <div class = "col-sm-6 second-layer-list" style = "padding:40px;" data-aos = "fade-left">
\t \t \t \t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t \t \t \t \t <p class="text-center">
\t \t \t \t \t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t \t \t \t \t </p>
\t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="clearfix"></div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </section>
\t \t </div>请看codepen。代码段有一些问题。 1
呀它的工作..但第二目标应该显示过。第二个目标不显示.. –
感谢它的工作..我得到一个奇怪的问题。该代码正在使用codepen，但不在我的网页上。任何想法可能会影响它？ –
没有错误..只是空白。 –