javascript - 工作列表组 Bootstrap

Question

现在我找不到如何让 list-group 工作的方法。我想要在左侧使用 col-lg-9 的面板。在右侧有一个选择菜单，使用 col-lg-3。

我不希望这个选择菜单动态改变页面的内容。因此，当我点击第 1 项时，面板会提供与第 1 项相关的信息。

到目前为止，我已经做到了这一点，但这还行不通。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
  <div class='row'>
    <div class='col-lg-9'>
      <div class='panel panel-default' id='panel1'>
        <div class='panel-body'>
          <div class='page-header'>
            <h3>The first panel <small>Posted on december 23 2015</small></h3>
          </div>
          <img class='featuredImg' src='resources/screenshot1.png'>
          <p>Another paragraph</p>
          <h4>This is a header</h4>
          <p>Paragraph to match this header</p>
        </div>
      </div>
      <div class='panel panel-default' id='panel2'>
        <div class='panel-body'>
          <div class='page-header'>
            <h3>This is panel two <small>Posted on december 24 2015</small></h3>
          </div>
          <p>This is a paragraph for panel two</p>
          <h4>This is a sub header for panel two</h4>
          <p>This is content belonging to subheading of panel two</p>
        </div>
      </div>
    </div>
    <div class='col-lg-3'>
      <div class='list-group'>
        <a href='#panel1' class='list-group-item active' data-toggle='tab'>
          <h4 class='list-group-item-heading'>Item 1</h4>
          <p class='list-group-item-text'>Short info about the item</p>
        </a>
        <a href='#panel2' class='list-group-item' data-toggle='tab'>
          <h4 class='list-group-item-heading'>Item 2</h4>
          <p class='list-group-item-text'>Short info about the item</p>
        </a>
      </div>
    </div>
  </div>
</div>

Answer 1

如果我没理解错的话，您需要将 tabs 和 item-list 组件结合起来。

像这样:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
  <div class='row'>
    <div class='col-lg-9 tab-content'>
      <div class='panel panel-default tab-pane active' id='panel1'>
        <div class='panel-body'>
          <div class='page-header'>
            <h3>The first panel <small>Posted on december 23 2015</small></h3>
          </div>
          <img class='featuredImg' src='resources/screenshot1.png'>
          <p>Another paragraph</p>
          <h4>This is a header</h4>
          <p>Paragraph to match this header</p>
        </div>
      </div>
      <div class='panel panel-default tab-pane' id='panel2'>
        <div class='panel-body'>
          <div class='page-header'>
            <h3>This is panel two <small>Posted on december 24 2015</small></h3>
          </div>
          <p>This is a paragraph for panel two</p>
          <h4>This is a sub header for panel two</h4>
          <p>This is content belonging to subheading of panel two</p>
        </div>
      </div>
    </div>
    <div class='col-lg-3'>
      <ul class='list-group'>
        <li class="list-group-item active">
          <a href='#panel1' data-toggle='tab'>
            <h4 class='list-group-item-heading'>Item 1</h4>
            <p class='list-group-item-text'>Short info about the item</p>
          </a>
        </li>
        <li class="list-group-item">
          <a href='#panel2' data-toggle='tab'>
            <h4 class='list-group-item-heading'>Item 2</h4>
            <p class='list-group-item-text'>Short info about the item</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>