如何 3 个不同的 `a` 链接，打开 3 个不同的 div

Question

我有 3 个看起来像按钮的链接，当我点击每个链接时，我想在下面显示一个 div 文本。所以3个链接a，3个div文本。我必须使用jquery，我不知道哪种方法更好。使用 class=active 还是使用 style="display:none"？

我的代码如下：

<div class="col-xs-4">
  <div class="packet-offer" id="Basic">
    <div class="vertical-middle">
      <a class="tab-link col-xs-12" href="#tab_Basic">Basic</a>
    </div>
  </div>
</div>
<div class="col-xs-4">
  <div class="packet-offer" id="Extra">
    <div class="vertical-middle">
      <a class="tab-link col-xs-12" href="#tab_Extra">Extra</a>
    </div>
  </div>
</div>
<div class="col-xs-4">
  <div class="packet-offer" id="Premium">
    <div class="vertical-middle">
      <a class="tab-link col-xs-12" href="#tab_Premium">Premium</a>
    </div>
  </div>
</div>
<div class="tab-boxes" id="tab_Basic">
  <div class="damageDetails">
    <h2 class="title results_found" id="results_found">Found <strong>15</strong>
    offers in the category Basic from <strong>98,97</strong>, and they have:</h2>
    <div class="row" style="margin-bottom: 40px;">
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Human resources</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Natural damages</span>
    </div>
  </div><!--damageDetails-->
</div><!--tab_Basic-->
<div class="tab-boxes" id="tab_Extra">
  <div class="damageDetails">
    <h2 class="title results_found" id="results_found">Found <strong>15</strong>
    offers in the category Extra from <strong>198,97</strong>, and they have:</h2>
    <div class="row" style="margin-bottom: 40px;">
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Human resources</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Natural damages</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Animal damages</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Space damages</span>
    </div>
  </div><!--damageDetails-->
</div><!--tab_Extra-->
<div class="tab-boxes" id="tab_Premium">
  <div class="damageDetails">
    <h2 class="title results_found" id="results_found">Found <strong>8</strong>
    offers in the category Premium from <strong>358,79</strong>, and they have:</h2>
    <div class="row" style="margin-bottom: 40px;">
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Human resources</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Natural damages</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Animal damages</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Space damages</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Premium</span>
    </div>
  </div><!--damageDetails-->
</div><!--tab_Premium-->

我也有图片以便更好地理解： Basic Extra

该网站不允许我为高级链接添加第三张图片。但这几乎是一样的。

Answer 1

我看到你使用 Bootstrap，所以你可以使用Bootstrap tabs 组件。

它也是一样的，你需要改变一点你的代码，或者如果你想使用你自己的 js 代码 - 使用 display:none 像 Bootstrap。

Answer 2

你可以使用任何一个。一个合适的方式来使用两者。所选按钮的 CSS 的“活动”类。您可以通过 'display: none' 单独隐藏选项卡框。

<div class="col-xs-4">
     <div class="packet-offer" id="Basic">
         <div class="vertical-middle">
              <a class="tab-link col-xs-12" data-tab="tab_Basic" href="javascript:void(0);">Basic</a>
         </div>
     </div>
</div>
<div class="col-xs-4">
    <div class="packet-offer" id="Extra">
        <div class="vertical-middle">
            <a class="tab-link col-xs-12" data-tab="tab_Extra" href="javascript:void(0);">Extra</a>
        </div>
    </div>
</div>
<div class="col-xs-4">
    <div class="packet-offer" id="Premium">
        <div class="vertical-middle">
             <a class="tab-link col-xs-12" data-tab="tab_Premium" href="javascript:void(0);">Premium</a>
        </div>
    </div>
</div>

///Rest HTML

<script>

$(function() {
    $(".tab-link").click(fnuction() {
        var tab = $(this).attr("data-tab");
        $(".tab-link").removeClass("active");
        $(this).addClass("active");
        $(".tab-boxes").hide();
        $("#"+tab).show();
    });
});
</script>

Answer 3

$('.tab-link').click(function() {
  $('.tab-boxes').hide();
  $($(this).attr('href')).show();
})

.tab-boxes {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4">
  <div class="packet-offer" id="Basic">
    <div class="vertical-middle">
      <a class="tab-link col-xs-12" href="#tab_Basic">Basic</a>
    </div>
  </div>
</div>
<div class="col-xs-4">
  <div class="packet-offer" id="Extra">
    <div class="vertical-middle">
      <a class="tab-link col-xs-12" href="#tab_Extra">Extra</a>
    </div>
  </div>
</div>
<div class="col-xs-4">
  <div class="packet-offer" id="Premium">
    <div class="vertical-middle">
      <a class="tab-link col-xs-12" href="#tab_Premium">Premium</a>
    </div>
  </div>
</div>


<div class="tab-boxes" id="tab_Basic">
  <div class="damageDetails">
    <h2 class="title results_found" id="results_found">Found <strong>15</strong> offers in the category Basic from <strong>98,97</strong>, and they have:</h2>
    <div class="row" style="margin-bottom: 40px;">
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Human resources</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Natural damages</span>
    </div>
  </div>
  <!--damageDetails-->
</div>


<!--tab_Basic-->
<div class="tab-boxes" id="tab_Extra">
  <div class="damageDetails">
    <h2 class="title results_found" id="results_found">Found <strong>15</strong> offers in the category Extra from <strong>198,97</strong>, and they have:</h2>
    <div class="row" style="margin-bottom: 40px;">
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Human resources</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Natural damages</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Animal damages</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Space damages</span>
    </div>
  </div>
  <!--damageDetails-->
</div>


<!--tab_Extra-->
<div class="tab-boxes" id="tab_Premium">
  <div class="damageDetails">
    <h2 class="title results_found" id="results_found">Found <strong>8</strong> offers in the category Premium from <strong>358,79</strong>, and they have:</h2>
    <div class="row" style="margin-bottom: 40px;">
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Human resources</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Natural damages</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Animal damages</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Space damages</span>
      <span class="col-xs-6 col-sm-4 col-md-3 standar-offers">
      <i class="fa fa-check"></i>Premium</span>
    </div>
  </div>
  <!--damageDetails-->
</div>
<!--tab_Premium-->