你可以使用jQuery的toggle方法。在初始化时隐藏第二个div...

$(document).ready(function() {
    $('.change').click(function() {
        $('#first, #second').toggle();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">first</div>
<div id="second" style="display: none;">second</div>
<button class="change">change</button>

实施例：https://jsfiddle.net/tanaydin/kjyq0eow/3/
文件：http://api.jquery.com/toggle/
编辑后：@Darren Sweeney的评论，这个选择器更好。

首先，你不会看到空的div。
实施例-1

$(document).ready(function() {
    $('.change').click(function() {
      $('#first').toggle();
      $('#second').toggle();
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" style="display: none">teste</div>
<div id="second">teste2</div>
<button class="change">change</button>

Example - 2你可以用以下命令检查一个元素是否可见：

$(document).ready(function() {
    $('.change').click(function() {
      if($('#first').is(":visible")){
      $('#first').hide();
      $('#second').show();
      }else{
      $('#first').show();
      $('#second').hide();
      }
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">test1</div>
<div id="second">test2</div>
<button class="change">change</button>

我想建议一个更稳定的方法，所以你可以添加多少“div”。代码的基本要点是创建一个从获得的列表中迭代的函数。该列表由想要被替代地示出的“屏幕内容”组成。

const divs = Array.from(document.querySelectorAll(".screen-content"));
    const previousBtn = document.getElementById("previous-btn");
    const nextBtn = document.getElementById("next-btn");
    
    previousBtn.addEventListener("click", showPreviousContent);
    nextBtn.addEventListener("click", showNextContent);
    
    divs.forEach((div, index) => {
      if (index !== 0) {
        div.classList.add("hide");
      }
    });
    
    let currentIndex = 0;
    divs[currentIndex].classList.remove("hide");
    
    function showPreviousContent() {
        divs[currentIndex].classList.add("hide");
        currentIndex = (currentIndex - 1 + divs.length) % divs.length;
        divs[currentIndex].classList.remove("hide");
    }
    
    function showNextContent() {
        divs[currentIndex].classList.add("hide");
        currentIndex = (currentIndex + 1) % divs.length;
        divs[currentIndex].classList.remove("hide");
    }

.hide{
        display: none;
    }

<div class="screen-content">first</div>
    <div class="screen-content">second</div>
    <button id="previous-btn" style="height:50px; width:50px"></button>
    <button id="next-btn" style="height:50px; width:50px"></button>