Jquery 3个不同的'a'链接，打开3个不同的div

我有3个链接a，看起来像按钮，我想在下面显示一个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-->

发现15个
来自98,97的基本类别中的优惠，包括：
人力资源
自然损害
发现15个
198,97中额外类别的优惠，它们有：
人力资源
自然损害
动物损害
空间损害
找到8
从358,79开始的优质类别优惠，他们有：
人力资源
自然损害
动物损害
空间损害
保险费

为了更好地理解，我还提供了以下图片：

---

该网站不允许我把第三张图片的溢价链接。但几乎是一样的。

我看到您使用引导，所以您可以使用组件

---

它的作用是相同的，您需要对代码进行一些更改，或者如果您想使用自己的js代码，请使用

display:none

，就像Bootstrap一样。

您可以使用任何一种。一种同时使用两者的合适方式。”所选按钮的CSS的“活动”类。您可以通过“显示：无”单独隐藏选项卡框

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

///RESTHTML
$（函数（）{
$（“.tab链接”）。单击（fnuction（）{
var tab=$（this.attr（“数据选项卡”）；
$（“.tab链接”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
$（“.tab框”）.hide（）；
$（“#”+tab.show（）；
});
});

$（'.tab链接'）。单击（函数（）{
$（'.tab框'）.hide（）；
$（$（this.attr（'href'））.show（）；
})

.tab框{
显示：无；
}

在98,97的基本类别中找到15个优惠，它们有：
人力资源
自然损害
在198,97的额外类别中找到15个优惠，他们有：
人力资源
自然损害
动物损害
空间损害
在358,79的“特优”类别中找到8的优惠，他们有：
人力资源
自然损害
动物损害
空间损害
保险费

您正在使用bootstrap css，那么您也在使用bootstrap.js吗？如果是这样的话，你可以使用标签或药片，谢谢@Yaroslav Molchan，但我不知道细节和如何使用js代码和这个显示：没有你对我说的。还有一个问题。在3个按钮的每次更改中，文本下方也会更改一些不同的计算过程。每个按钮都有不同的价格。谢谢@tye。但我想知道，它是否也是动态的？我的意思是，如果这段代码已经准备好处理计算过程。或者我需要一些PHP和HTML的混合？我不知道。谢谢你@Akshay Prakash。但我想知道，它是否也是动态的？我的意思是，如果这段代码已经准备好处理计算过程。或者我需要一些PHP和HTML的混合？我不知道。