Question

我无法解决此问题，我不是专业的javascript编码器。

我有几个显示div内容的按钮。页面加载后，第一个div必须可见，但在单击其他按钮时隐藏。我可以使用脚本来做到这一点，并且工作正常。

问题是，当显示的内容与第一个div不同并且刷新页面时，第一个div变为可见。我知道基于此脚本的逻辑行为，在加载而不是刷新页面时应显示第一个div，我应该怎么做？

$(document).ready(function() {
  $("#apa, #com, #adi").click(function() {
    if ($('.cover').css('display') == 'block') {
      $('.cover').css('display', 'none');
    }
  });
  $("#apa").click(function() {
    if ($('.cover').css('display') == 'none') {
      $('.cover').css('display', 'block');
    }
  });
});

.image {
  display: none;
}

.image:target {
  display: block;
}

.cover {
  display: block;
}

div {display:flex; margin: 0 12px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="image01" class="image cover">
  <img src="https://www.african.cam.ac.uk/images/secondlevel/dasshills/image_preview">
</div>

<div id="image02" class="image">
  <img src="https://data.whicdn.com/images/60436988/large.png">
</div>

<div id="image03" class="image">
  <img src="https://www.tawbaware.com/maxlyons/crop_8.jpg">
</div>

<div>
<div id="apa">
    <a href="#image01">Picture 1</a>
</div>
<div id="com">
    <a href="#image02">Picture 2</a>
</div>
<div id="adi">
    <a href="#image03">Picture 3</a>
</div></div>

加载页面时显示<div>内容，刷新时显示

0 个答案: