jquery - 如何只让一侧栏作为选项卡式内容 Bootstrap 3.？

Question

我试图使用Bootstrap在单列中使用它时可以使用选项卡式内容，但是当我将一列列在全球上放在页面上时，请始终在标签更改时，始终可以更改右侧列内容。

这是我的代码。

<div class="container" >
<div class="row">
<ul class="nav nav-pills nav-centered img-tab">
  <li class="active"><a data-toggle="pill" href="#home"> <i class="cooking"></i> <br>
    Cooking</a></li>
  <li><a data-toggle="pill" href="#menu1"> <i class="wrtiting"></i> <br>
    Reading Writing</a></li>
  <li><a data-toggle="pill" href="#menu2"> <i class="cooking"></i> <br>
    volunteering</a></li>
  <li><a data-toggle="pill" href="#menu3"> <i class="sports"></i> <br>
    Sports</a></li>
  <li><a data-toggle="pill" href="#menu4"> <i class="art"></i> <br>
    Art</a></li>
  <li><a data-toggle="pill" href="#menu5"> <i class="music"></i> <br>
    Music</a></li>
</ul>
</div>
<div class="row">
<div class="col-lg-3 form-bg">
  <form class="filter-form">
    <div class="input-group search-input">
      <input id="search" type="text" class="form-control" name="search" placeholder="Search">
      <span class="input-group-addon"><i class="fa fa-search"></i></span> </div>
    <div class="form-group">
      <label class="s-label">SELECT PERIOD</label>
      <div class="row">
        <div class="col-md-6">
          <input type="date" id="fdatepicker" class="form-control width100 d-widthf" placeholder="From">
        </div>
        <div class="col-md-6">
          <input type="date" id="datetimepicker4" class="form-control d-widthl" placeholder="To">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <label class="s-label">FILTER BY DAY OF THE WEEK</label>
        <label class="checkbox-inline">
        <input type="checkbox" class="d-check" />
        <label for="days"></label>
        </label>
        <label class="checkbox-inline">
        <input type="checkbox" class="d-check" />
        <label for="days"></label>
        </label>
        <label class="checkbox-inline">
        <input type="checkbox" class="d-check" />
        <label for="days"></label>
        </label>
        <label class="checkbox-inline">
        <input type="checkbox" class="d-check" />
        <label for="days"></label>
        </label>
        <label class="checkbox-inline">
        <input type="checkbox" class="d-check" />
        <label for="days"></label>
        </label>
        <label class="checkbox-inline">
        <input type="checkbox" class="d-check" />
        <label for="days"></label>
        </label>
        <label class="checkbox-inline">
        <input type="checkbox" class="d-check" />
        <label for="days"></label>
        </label>
        <br>
        <label class="label-inline"> MO </label>
        <label class="label-inline"> TU </label>
        <label class="label-inline"> WE </label>
        <label class="label-inline"> TH </label>
        <label class="label-inline"> FR </label>
        <label class="label-inline"> SA </label>
        <label class="label-inline"> SU </label>
      </div>
      <div class="row">
        <div class="col-md-12 text-center">
          <input type="submit" value="Search" class="search-btn">
        </div>
      </div>
    </div>
  </form>
</div>
<div class="tab-content">
  <div id="home" class="tab-pane active">
    <div class="col-lg-9">
      <div class="row">
        <div class="col-lg-3 ">
          <div class="post-image"> <img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu">
            <div class="caption post-content"> <a href="activity-detail.html">
              <h4>Enter Title Here</h4>
              </a>
              <p>Lorem ipsum dolor sit amet</p>
              <div class="date"> <a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> Dubai</a> <a href="#"><i class="fa fa-calendar" aria-hidden="true"></i> Flexible Dates</a> </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 ">
          <div class="post-image"> <img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu">
            <div class="caption post-content"> <a href="activity-detail.html">
              <h4>Enter Title Here</h4>
              </a>
              <p>Lorem ipsum dolor sit amet</p>
              <div class="date"> <a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> Dubai</a> <a href="#"><i class="fa fa-calendar" aria-hidden="true"></i> Flexible Dates</a> </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 ">
          <div class="post-image"> <img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu">
            <div class="caption post-content"> <a href="activity-detail.html">
              <h4>Enter Title Here</h4>
              </a>
              <p>Lorem ipsum dolor sit amet</p>
              <div class="date"> <a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> Dubai</a> <a href="#"><i class="fa fa-calendar" aria-hidden="true"></i> Flexible Dates</a> </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-3 ">
          <div class="post-image"> <img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu">
            <div class="caption post-content"> <a href="activity-detail.html">
              <h4>Enter Title Here</h4>
              </a>
              <p>Lorem ipsum dolor sit amet</p>
              <div class="date"> <a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> Dubai</a> <a href="#"><i class="fa fa-calendar" aria-hidden="true"></i> Flexible Dates</a> </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 ">
          <div class="post-image"> <img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu">
            <div class="caption post-content"> <a href="activity-detail.html">
              <h4>Enter Title Here</h4>
              </a>
              <p>Lorem ipsum dolor sit amet</p>
              <div class="date"> <a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> Dubai</a> <a href="#"><i class="fa fa-calendar" aria-hidden="true"></i> Flexible Dates</a> </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 ">
          <div class="post-image"> <img class="img img-responsive" src="images/activites/activity-01.jpg" alt="menu">
            <div class="caption post-content"> <a href="activity-detail.html">
              <h4>Enter Title Here</h4>
              </a>
              <p>Lorem ipsum dolor sit amet</p>
              <div class="date"> <a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> Dubai</a> <a href="#"><i class="fa fa-calendar" aria-hidden="true"></i> Flexible Dates</a> </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
   </div>
   </div> 
  </div>

我只是还没有添加其余选项卡的内容，因为当我添加更多选项卡内容时，只有第一个不工作，就像其他内容没有隐藏并在单击另一个选项卡时显示一样。

标签： jqueryhtmlcsstwitter-bootstrap-3