试图制作基本标签

好的，所以我有两个按钮。我的目标是制作页面，当单击一个按钮时，它将显示一个段落，并且当单击另一个时，它将关闭另一个页面并显示另一段落。我认为这会很简单，但当点击另一个选项卡时关闭一个选项卡很困难。试图制作基本标签

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"; 
    } 
}

不完全确定为什么这不起作用。任何帮助表示赞赏！

来源

2013-01-04 EpicPineapple

下面是使用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>

来源

2013-01-04 03:14:48 sgeddes

我确实可以使用jQuery，但是我通常不喜欢它，不是因为我有什么反对，而是因为我想学习如何做“从头开始”，如果你愿意的话。 – EpicPineapple

....现在我觉得自己像个白痴。谢谢你回答我的问题，即使答案是在我面前凝视着我！ – EpicPineapple

你是在开玩笑吧...非jQuery代码与我发布的答案完全相同。 –

您所做的只是将文本框显示设置为内联。如果您从未将显示器设置为“不显示任何内容”，您如何预期隐藏了任何选项卡。

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"; 
}

来源

2013-01-04 03:04:45

这是一个好点，但也许应该是一个评论。 – jozzas

我在我的CSS中将它设置为none – EpicPineapple

是的，但是一旦您将其切换为内联一次显示，它将一直显示，直到您在JavaScript中将显示设置回无。所以标签一旦显示一次就不会再隐藏。 –

试图制作基本标签

回答

相关问题