点击更改<div>

Question

有没有办法可以让右边的一个出现？并通过滑动显示？

这是我用来调用

的代码

<button onClick="div1()">Try it</button>
<button onClick="div2()">Try it</button>
<button onClick="div3()">Try it</button>

这是我正在使用的脚本

<script>
function div1() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

function div2() {
    var x = document.getElementById('myDIV2');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

function div3() {
    var x = document.getElementById('myDIV3');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

我想让我的网站看起来像这样

Answer 1

通过创建一个发送div编号（1,2,3 ......）的功能，您可以滑动相关的div并隐藏所有其他div。

尝试下面的代码片段:(使用jquery），

function toggleDiv(divNum) {
    
    $("#close").hide();
    $(".slide").animate({right:'-200'},350);
    if($("#div"+divNum)) {
        
        $("#div"+divNum).animate({right:'0'},350,function(){$("#close").show();});
    }
}

$(document).ready(function(){
   $("#close").on("click",function(e){
      $(".slide").animate({right:'-200'},350);
      $(this).hide()
   })

})

.slide {
  width:200px;
  height:100%;
  position:absolute;
  right:-200px;
  top:0;
  background:#d2d2d2;
}

#close {
  position:absolute;
  right:10px;
  top:10px;
  z-index:10;
  display:none;
}

#right-content {
  position:absolute;
  right:0;
  top:0;
  overflow:hidden;
  width:200px;
  height:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="toggleDiv(1)">Try it 1</button>
<button onClick="toggleDiv(2)">Try it 2</button>
<button onClick="toggleDiv(3)">Try it 3</button>

<div id="right-content">
  <div id="close">X</div>
  <div class="slide" id="div1">content 1</div>
  <div class="slide" id="div2">hey I'm content 2</div>
  <div class="slide" id="div3">Now it's content 3</div>
<div>

Answer 2

这样做：

<div id="rightSideDiv" ></div>
<input type="hidden" id="myHiddenField1" value="<b> Info of div 1</b>" />
<input type="hidden" id="myHiddenField2" value="<b> Info of div 2</b>" />
<input type="hidden" id="myHiddenField3" value="<b> Info of div 3</b>" />

<button onClick="doDisplay('myHiddenField1')">Try it</button>
<button onClick="doDisplay('myHiddenField2')">Try it</button>
<button onClick="doDisplay('myHiddenField3')">Try it</button>

<script>
function doDisplay(hiddenFileldID) {
    var x = document.getElementById(hiddenFileldID).value;
    document.getElementById("rightSideDiv").innerHTML = x;
}
</script>