Question

我创建了一个标签系统。它似乎在JSFiddle上完全适用于我需要的东西，除了在这里运行错误代码并且我需要首先隐藏两个选项卡上的选项卡内容并且仅在单击选项卡（图像）时显示。有人可以帮助解决这些问题吗？

我对Javascript很新。提前谢谢。

我只是Javascript的新手，所以需要一些帮助。提前谢谢！

$('span.a, span.b').click(function() {
  if (!$(this).hasClass('active')) {
    $('span.a, span.b').removeClass('active');
    $(this).addClass('active');
    $('div.a, div.b').toggle();
  }
});

div {
  margin-top: 40px;
  width: 80%;
  text-align: left;
}

<center><span class="a active"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/10/Customers.jpg" width="200"> </span>
  <span class="b"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/12/Landlords.jpg" width="200"></span>
  <div class="a">Cornerstone Parking provides value for money parking in Brisbane’s CBD and surrounding suburbs. Our turn up and park rates (ie no need to pre-book) are often cheaper than other car park’s online discount rates and you can always be sure of getting a
    bay in a Cornerstone car park. Our convenient and centrally located CBD car parks are run by our friendly staff and are predominantly located in the Adelaide Street, Ann Street and Creek Street areas. Our car parks offer discounted parking in large
    bays with ample height clearance. We offer hourly (visitor) parking as well as monthly parking, early bird parking and motorbike parking in most of our car parks.</div>
  <div class="b" style="display:none">Cornerstone Parking provides a high quality, professional and technology driven car park management service. A part of the Cornerstone Group, our property development and management heritage provides us with a true appreciation of landlord issues. Our
    parent company backing means that Cornerstone Parking has the appetite and ability to participate in larger parking projects, including the development of new car parks. We provide owners, investors and developers with our car park management, advisory
    and consultation services.</div>
</center>

Answer 1

在主体标签的末尾添加jQuery（在代码片段中它是html代码的结尾）解决了你的问题。

请告诉我这是否是您想知道的。

由于你的js代码使用jQuery库语法，你需要像这样添加jQuery库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

对于隐藏部分，您可以通过以下方式隐藏div：

div.a,
div.b {
  visibility:hidden;
}

然后在js中编辑可见性点击

$('div.a, div.b').css("visibility","visible")

可见性隐藏了内容，但仍然会占用空间。如果您想让隐藏内容占用页面中的任何空格，请使用“display”css属性而不是可见性。

您可以在下面找到完整的代码：

$('span.a, span.b').click(function() {
  if (!$(this).hasClass('active')) {
    $('span.a, span.b').removeClass('active');
    $(this).addClass('active');
    $('div.a, div.b').toggle();
  }
  $('div.a, div.b').css("visibility","visible")
});

div {
  margin-top: 40px;
  width: 80%;
  text-align: left;
}
div.a,
div.b {
  visibility:hidden;
}

<center><span class="a active"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/10/Customers.jpg" width="200"> </span>
  <span class="b"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/12/Landlords.jpg" width="200"></span>
  <div class="a">Cornerstone Parking provides value for money parking in Brisbane’s CBD and surrounding suburbs. Our turn up and park rates (ie no need to pre-book) are often cheaper than other car park’s online discount rates and you can always be sure of getting a
    bay in a Cornerstone car park. Our convenient and centrally located CBD car parks are run by our friendly staff and are predominantly located in the Adelaide Street, Ann Street and Creek Street areas. Our car parks offer discounted parking in large
    bays with ample height clearance. We offer hourly (visitor) parking as well as monthly parking, early bird parking and motorbike parking in most of our car parks.</div>
  <div class="b" style="display:none">Cornerstone Parking provides a high quality, professional and technology driven car park management service. A part of the Cornerstone Group, our property development and management heritage provides us with a true appreciation of landlord issues. Our
    parent company backing means that Cornerstone Parking has the appetite and ability to participate in larger parking projects, including the development of new car parks. We provide owners, investors and developers with our car park management, advisory
    and consultation services.</div>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

标签 - 需要在页面加载时隐藏内容并在单击时显示

1 个答案: