javascript - 选项卡 - 需要在页面加载时隐藏内容并在单击时显示内容

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

在 body 标记的末尾添加 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")

Visibility 隐藏了内容，但空间仍然会被消耗。 如果你想让不可见的内容占据页面中的任何空间，请使用“显示”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>