点击更改< div>的内容 [英] Onclick changing content on <div>

问题描述

有没有办法让我在右边出现一个？并通过滑动显示？

以下是我用来调用

 < button onClick =div1（）>试试< / button> 
< button onClick =div2（）>试试< / button> 
< button onClick =div3（）>试试< / button> 
  

以下是我正在使用的脚本

 <脚本> 
函数div1（）{
 var x = document.getElementById（'myDIV'）; 
 if（x.style.display ==='none'）{
 x.style.display ='block'; 
} else {
 x.style.display ='none'; 
 
 
 
函数div2（）{
 var x = document.getElementById（'myDIV2'）; 
 if（x.style.display ==='none'）{
 x.style.display ='block'; 
} else {
 x.style.display ='none'; 
 
 
 
函数div3（）{
 var x = document.getElementById（'myDIV3'）; 
 if（x.style.display ==='none'）{
 x.style.display ='block'; 
} else {
 x.style.display ='none'; 
} 
} 
< / script> 
  

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

解决方案

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

试试下面的代码片段：（使用jquery），

function toggleDiv

  .slide {width：200px;高度：100％;位置：绝对的;右：-200px;顶部：0;背景：＃d2d2d2;}＃close {position：absolute;右：10px的;顶部：10px的;的z-index：10; display：none;}＃right-content {position：absolute;右：0;顶部：0;溢出：隐藏;宽度：200像素; height：100％;}  

< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><button onClick =toggleDiv（1）>尝试1< / button>< button onClick =toggleDiv（2）>尝试2< / button>< button onClick =toggleDiv（3）>尝试3< / button>< div id =right -content> < div id =close> X< / div> < div class =slideid =div1> content 1< / div> < div class =slideid =div2>嘿我是内容2< / div> < div class =slideid =div3>现在是内容3< / div>< div>

Is there a way I can make the on the right appear one at a time? And show by sliding?

Here's the code I'm using to call the

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

Here is the script I am using

<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>

I want to make my site look like this

解决方案

By creating a function where you send the div number ( 1 , 2 , 3 ...) you can slide the concerned div and hide all the others .

Try the bellow snippet : ( using 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>

这篇关于点击更改< div>的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！