標簽頁內容未顯示

Question

我正在使用顯示兩個數據目標內容的選項卡（那沒問題）。 我添加了一個腳本，該腳本會在5秒鍾后自動更改標簽。 標簽頁更改，但標簽頁內容未顯示。 我不知道為什么 任何幫助，將不勝感激。 謝謝。

Codepen在這里

 $(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

Answer 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

嘗試使用它，希望對您有所幫助。

Answer 2

在這里，您可以使用有效的解決方案https://jsfiddle.net/L64s4bxh/2/

var tabContentObj = $('.tab-pane');

tabContentObj.hide().removeClass('in');

$(currentAncorObj.attr('data-target')).show().addClass('in');