隐藏引导面板

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