基于jQuery UI实现两个div侧边滑动切换的问题求助

嘿，我看了你的代码，问题主要出在逻辑颠倒和元素定位缺失这两个关键点上，导致滑动效果没达到预期。咱们一步步来修正：

原代码的核心问题 #

• 函数逻辑搞反：点击Back按钮调用showpage('page1')时，你的代码反而隐藏了page1、显示page2，完全和预期操作相反；
• 页面元素未设置定位：两个.page元素默认是块级布局，滑动时会占据容器空间，导致布局跳动，无法实现重叠切换的效果；
• CSS存在重复定义，代码冗余。

修正后的完整代码 #

HTML部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="container" class="container">
  <div id="page1" class="page1 active">
    Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus.
  </div>
  <div id="page2" class="page2">
    Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio.
  </div>
</div><br/>
<input type="button" value="Back" onClick="showpage('page1');"/>
<input type="button" value="Next" onClick="showpage('page2');"/>

CSS部分

.container {
  border: 5px solid #000;
  width: 310px;
  height: 310px;
  position: relative; /* 作为绝对定位元素的父容器 */
}

.page1, .page2 {
  width: 300px;
  height: 300px;
  color: #000;
  padding: 5px;
  display: none;
  position: absolute; /* 让两个页面重叠在容器内 */
  top: 0;
  left: 0;
}

.container .page1 {
  background: yellow;
}

.container .page2 {
  background: green;
}

.active {
  display: block;
}

JavaScript部分

function showpage(page) {
  if(page === "page2") {
    // 点击Next：隐藏page1，从右侧滑入page2
    $(".page1.active").hide("slide", { direction: "left" }, 1000, function(){
      $(this).removeClass('active');
      $('.page2').show("slide", { direction: "right" }, 1000).addClass('active');
    });
  } else {
    // 点击Back：隐藏page2，从左侧滑入page1
    $(".page2.active").hide("slide", { direction: "right" }, 1000, function(){
      $(this).removeClass('active');
      $('.page1').show("slide", { direction: "left" }, 1000).addClass('active');
    });
  }
}

关键修正点说明 #

1. 定位设置：给.container添加position: relative，给.page1和.page2添加position: absolute，让两个页面完全重叠在容器内，滑动时不会出现布局移位；
2. 逻辑修正：调整了showpage函数的判断逻辑，点击Next（参数page2）时隐藏当前的page1并从右侧滑入page2，点击Back（参数page1）时隐藏当前的page2并从左侧滑入page1，完全符合你的预期；
3. 代码优化：合并了重复的CSS定义，让代码更简洁易读。

内容的提问来源于stack exchange，提问作者Abu Ayyub