好吧,我有两个按钮。我的目标是制作页面,以便在单击一个按钮时,它将显示一个段落,当单击另一个时,它将关闭另一个选项卡并显示另一个段落。我认为这很简单,但是当点击另一个时,让一个标签关闭已经证明是困难的。
function btn1Event(){
var text1 = document.getElementById("btn1Text");
var text2 = document.getElementById("btn2Text");
if(text2.style.display == "inline" || text1.style.display == "none"){
text1.style.display = "inline";
}
}
function btn2Event(){
var text1 = document.getElementById("btn1Text");
var text2 = document.getElementById("btn2Text");
if(text1.style.display == "inline" || text2.style.display == "none"){
text2.style.display = "inline";
}
}
不完全确定为什么这不起作用。任何帮助表示赞赏!
答案 0 :(得分:1)
这是一个使用jQuery的解决方案,如果这是一个选项:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<input type=button id="btn1" value="Show Div1">
<input type=button id="btn2" value="Show Div2">
<div style="display: none;" id="btn1Text">Test Div</div>
<div style="display: none;" id="btn2Text">Test Div2</div>
<script type="text/javascript">
$(document).ready(function () {
$("#btn1").click(function() {
$("#btn1Text").show();
$("#btn2Text").hide();
});
$("#btn2").click(function() {
$("#btn1Text").hide();
$("#btn2Text").show();
});
});
</script>
非jQuery方法:
<input type=button id="btn1" value="Show Div1" onclick="btn1Event();">
<input type=button id="btn2" value="Show Div2" onclick="btn2Event();">
<div style="display: none;" id="btn1Text">Test Div</div>
<div style="display: none;" id="btn2Text">Test Div2</div>
<script type="text/javascript">
function btn1Event(){
document.getElementById("btn1Text").style.display = "inline";
document.getElementById("btn2Text").style.display = "none";
}
function btn2Event(){
document.getElementById("btn1Text").style.display = "none";
document.getElementById("btn2Text").style.display = "inline";
}
</script>
答案 1 :(得分:0)
您所做的只是将文本框显示设置为内联。如果您从未将显示设置为无,那么您希望如何隐藏任何选项卡。
function btn1Event(){
document.getElementById("btn1Text").style.display = "inline";
document.getElementById("btn2Text").style.display = "none";
}
function btn2Event(){
document.getElementById("btn1Text").style.display = "none";
document.getElementById("btn2Text").style.display = "inline";
}