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

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

3 个答案: