隐藏引导面板

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

您的自定义标签与引导标签实施相冲突。 Best将有一个自定义选项卡实现。

这是一个快速的自定义实施 - https://jsfiddle.net/nitincool4urchat/uvvnpp0s/9/

＆＃13;

＆＃13;

$("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;
  }
});

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;