2015-08-19 16 views
0

У меня есть содержимое панели (не согласная), которая будет скрыта при загрузке страницы. Когда пользователь нажимает на одну из вкладок, «скрытый» класс удаляется, показывая содержимое панели. Тогда я хочу, чтобы скрыть содержимое, если пользователь нажимает на вкладку открытой панели:Скрыть панели самонастройки

$('#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/

Fiddle: https://jsfiddle.net/uvvnpp0s/3/

Как я могу достичь своей цели? Я ценю, что, возможно, все произошло совсем не так, поскольку я неопытен с JS/jQuery.

+0

вы можете добавить HTML используются? Лучше всего, если вы можете создать скрипку. –

+0

Спасибо за ваш комментарий - добавлена ​​скрипка к моему оригинальному вопросу. – user2265915

+0

https://jsfiddle.net/nitincool4urchat/uvvnpp0s/5/ - это исходная загрузочная система bootstrap.js, можете ли вы объяснить, какие изменения вам нужны, и я бы предложил не использовать загрузку, если вам нужно иметь пользовательские вкладки. –

ответ

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 > a p { 
 
    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>

+0

Таможенное решение выглядит как путь вперед, спасибо. Любая идея, почему содержимое панели перескакивает с верхней части окна просмотра, скрывая вкладки в течение секунды? – user2265915

Смежные вопросы