試圖製作基本標籤

好的，所以我有兩個按鈕。我的目標是製作頁面，當單擊一個按鈕時，它將顯示一個段落，並且當單擊另一個時，它將關閉另一個頁面並顯示另一段落。我認爲這會很簡單，但當點擊另一個選項卡時關閉一個選項卡很困難。試圖製作基本標籤

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中將顯示設置回無。所以標籤一旦顯示一次就不會再隱藏。 –

試圖製作基本標籤

回答

相關問題