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，但不在我的網頁上。任何想法可能會影響它？ –
沒有錯誤..只是空白。 –