Question

我有一个包含两个图像的div，当点击每个图像时，它们会显示一些文字。

＆＃13;

$('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")
});

＆＃13;

div.a,
div.b {
  visibility:hidden;
}

.footer {
  font-family:'Arial';
  font-size:13px;
  background-color:#000;
  color:#fff;
  text-align:center;
  padding:20px;
}

＆＃13;

<div style="background-color:#fff;"><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></div>
<div class="footer">Footer content
</div>

＆＃13;

我有两个问题：我需要将第一个div中两个图像下方的大空白区域最小化 - 这可以完成吗？

还有可能在再次点击图像时再次隐藏文本的Javascript代码吗？

谢谢！

Answer 1

额外的空间来自于使用visibility: hidden;，它会在页面上留下隐藏内容的布局，但会在视觉上隐藏它（因此它是不可见的）。请改用display: none;从页面中删除内容的布局，就好像它从未出现过一样。

然后你可以简化你的jQuery，只需切换一个类来指定活动/非活动图像，然后在CSS中使用兄弟选择器来显示活动内容。

$('span.a, span.b').click(function() {
  $(this).siblings().removeClass('active');
  $(this).toggleClass('active');
});

div.a,
div.b {
  display: none;
}

.a.active ~ .a, .b.active ~ .b {
  display: block;
}

.footer {
  font-family:'Arial';
  font-size:13px;
  background-color:#000;
  color:#fff;
  text-align:center;
  padding:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-color:#fff;">
  <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">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>
</div>
<div class="footer">Footer content
</div>

Answer 2

您的JavaScript函数仅检查该类是否未激活

if (!$(this).hasClass('active'))

你应该写一个else语句来切换可见性。

白色空间是造型问题。您应该编辑CSS中的边距/填充。

删除div部分下方的空白区域

2 个答案: