隱藏引導面板

Question

我有面板內容（不是手風琴）設置要在頁面加載時隱藏。 當用戶單擊選項卡之一時，將刪除“隱藏”類，從而顯示面板內容。 然后，如果用戶單擊打開面板的選項卡，我想隱藏內容：

$('#section-navigation a').click(function (e) {
  e.preventDefault()
  if ($(this).closest("li").hasClass("active")) {
    $('#section-navigation li.active').removeClass("active");
    $(".tab-content").addClass("tab-content-hidden");
  } else {
    $(".tab-content").removeClass("tab-content-hidden");
    $(this).tab('show');
  }
});

確實會在第一次單擊時顯示面板內容，在同一選項卡的第二次單擊時隱藏面板內容，但不會從面板內容“ li”中刪除“活動”類，並且在同一選項卡上單擊三次不會執行任何操作。 此處的示例（彩色面板）： http : //hawk.cloudlevel.me/

小提琴： https : //jsfiddle.net/uvvnpp0s/3/

我如何實現我的目標？ 我很欣賞我可能完全以錯誤的方式處理事情，因為我對JS / jQuery缺乏經驗。

Answer 1

您的自定義標簽與引導標簽的實現沖突。 最好是有一個自定義標簽實現。

這是一個快速的自定義實現-https://jsfiddle.net/nitincool4urchat/uvvnpp0s/9/

 $("a[role=tab]").click(function() { if ($(this).parent('li').hasClass('active')) { $(this).parent('li').removeClass('active'); $(".tab-content").addClass('tab-content-hidden'); } else { $("#section-navigation li").removeClass('active'); $(this).parent('li').addClass('active'); $(".tab-content").removeClass('tab-content-hidden'); $(".tab-content .tab-pane").hide(); //hide all $($(this).attr('href')).show(); //show the selected one; } }); 

 ul#section-navigation { list-style-type: none; padding: 0; } ul#section-navigation li { position: relative; float: left; width: 25%; padding-bottom: 15%; overflow: hidden; } ul#section-navigation li > a { position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; border: 0; color: #0e034f; } ul#section-navigation li > a, ul#section-navigation li.active > a, ul#section-navigation li a:hover, ul#section-navigation li a:focus { background: 0; border: 0; margin: 0; outline: 0; } ul#section-navigation li > a h2 { font-size: 24px; margin-top: 1vw; } ul#section-navigation li > ap { display: none; } ul#section-navigation li a div div { position: absolute; bottom: 0; right: 0; width: 15%; } ul#section-navigation li a div div:after { content: ""; display: block; padding-top: 100%; } ul#section-navigation li a div div div { display: block; width: 100%; height: 100%; } ul#section-navigation li a div div div span { display: block; line-height: 100%; color: #fff; transition: 0.2s all; font-size: 12vw; } ul#section-navigation li.active a div div span { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); transform-origin: 48% 48%; } .tab-content { overflow: hidden; max-height: 4000px; transition: max-height .5s cubic-bezier(1, 0, .7, 1); } .tab-content .panel-padding { padding-top: 2%; } .tab-content-close { float: right; font-size: 30px; width: 30px; text-align: center; margin-left: 100%; } .learn-more-1, .learn-more-2, .learn-more-3, .learn-more-4 { overflow: hidden; max-height: 4000px; padding-top: 60px; padding-bottom: 60px; } .tab-content-hidden, .learn-more-hidden, .bar-hidden { max-height: 0; padding-top: 0; padding-bottom: 0; } #link-learn-more-1, #link-learn-more-2, #link-learn-more-3, #link-learn-more-4 { position: relative; top: -50px; } .learn-more .tab-content img { width: 100%; } .panel-padding { padding: 5%; } 

 <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <ul class="nav nav-tabs" role="tablist" id="section-navigation"> <li role="presentation" class="gradient-white"> <a href="#panel-1" aria-controls="panel-1" role="tab"> <h2>Apprenticeships</h2> <p>Learn more about the great opportunities apprenticeships offer</p> <div> <div> <div class="bkg-blue"><span class="icon-plus"></span> </div> </div> </div> </a> </li> <li role="presentation" class="gradient-pink"> <a href="#panel-2" aria-controls="panel-2" role="tab"> <h2>Management</h2> <p>Developing the next generation of leaders and managers</p> <div> <div> <div class="bkg-pink"><span class="icon-plus"></span> </div> </div> </div> </a> </li> <li role="presentation" class="gradient-yellow"> <a href="#panel-3" aria-controls="panel-3" role="tab"> <h2>FE Teacher Training</h2> <p>Get qualified to train and teach in the FE sector</p> <div> <div> <div class="bkg-yellow"><span class="icon-plus"></span> </div> </div> </div> </a> </li> <li role="presentation" class="gradient-green"> <a href="#panel-4" aria-controls="panel-4" role="tab"> <h2>Learning Zone</h2> <p>e-Learning on demand 24/7</p> <div> <div> <div class="bkg-green"><span class="icon-plus"></span> </div> </div> </div> </a> </li> </ul> <div class="tab-content tab-content-hidden"> <div role="tabpanel" class="tab-pane fade in active" id="panel-1"> <div class="row"> <div class="col-sm-6"> <img src="http://hawk.cloudlevel.me/images/uploads/apprenticeshipsbanner.png" class="img-responsive" title="" alt="" /> </div> <div class="col-sm-6 panel-padding"> <a href="#" class="icon-remove tab-content-close color-blue"></a> <div class="stat color-blue"><span class="stat-number">95%</span><span class="stat-desc">of apprentices would recommend us</span> </div> <h2>Learn more about the great opportunities apprenticeships offer</h2> <p> <br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p> <a href="http://hawk.cloudlevel.me/apprenticeships" class="btn btn-blue" title="">Learn more</a> <a href="vacancies" class="btn btn-blue" title="">Current vacancies</a> </div> </div> <span class="bar bkg-blue"></span> </div> <div role="tabpanel" class="tab-pane fade in" id="panel-2"> <div class="row"> <div class="col-sm-6"> <img src="http://hawk.cloudlevel.me/images/uploads/managementsmall.png" class="img-responsive" title="" alt="" /> </div> <div class="col-sm-6 panel-padding"> <a href="#" class="icon-remove tab-content-close color-pink"></a> <div class="stat color-pink"><span class="stat-number">88%</span><span class="stat-desc">increased employee satisfaction</span> </div> <h2>Developing the next generation of leaders and managers</h2> <p> <br />Enjoy progressive, flexible learning that improves prospects, boosts careers and brings immediate value to your organisation.</p> <a href="http://hawk.cloudlevel.me/management" class="btn btn-pink" title="">Learn more</a> </div> </div> <span class="bar bkg-pink"></span> </div> <div role="tabpanel" class="tab-pane fade in" id="panel-3"> <div class="row"> <div class="col-sm-6"> <img src="http://hawk.cloudlevel.me/images/uploads/tutortraining.png" class="img-responsive" title="" alt="" /> </div> <div class="col-sm-6 panel-padding"> <a href="#" class="icon-remove tab-content-close color-yellow"></a> <div class="stat color-yellow"><span class="stat-number">95%</span><span class="stat-desc">had a positive impact on their career</span> </div> <h2>Inspiring training for aspiring teachers and assessors</h2> <p> <br />Take advantage of our accredited Level 3 and 4 qualifications for those who want to get into teaching, external assessing or internal quality control for assessments. Flexible, relevant and giving you the practical skills you need, our courses are designed to be easy to access, and help you take the next step in your career.</p> <a href="http://hawk.cloudlevel.me/fe-teacher-training" class="btn btn-yellow" title="">Learn more</a> </div> </div> <span class="bar bkg-yellow"></span> </div> <div role="tabpanel" class="tab-pane fade in" id="panel-4"> <div class="row"> <div class="col-sm-6"> <img src="http://hawk.cloudlevel.me/images/uploads/1.png" class="img-responsive" title="" alt="" /> </div> <div class="col-sm-6 panel-padding"> <a href="#" class="icon-remove tab-content-close color-green"></a> <div class="stat color-green"><span class="stat-number">93%</span><span class="stat-desc">would recommend to a friend</span> </div> <h2>Take the first steps towards being an outstanding apprentice</h2> <p> <br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p> <a href="http://hawk.cloudlevel.me/learning-zone" class="btn btn-green" title="">Learn more</a> </div> </div> </div> </div> </div> </div> </div>