[英]Onclick changing content on <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 . 通过创建一个发送div编号(1,2,3 ......)的功能,您可以滑动相关的div并隐藏所有其他div。
Try the bellow snippet : ( using jquery ) , 试试波纹管片段:(使用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>
Do like this: 这样做:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.