關閉1當另一個打開的JavaScript選項卡

Im新的JavaScript和使用和編輯代碼在網上找到。關閉1當另一個打開的JavaScript選項卡

到目前爲止，我有這個工程。

<script language="javascript"> 
function welcome() { 
    var ele = document.getElementById("toggleText"); 
    var text = document.getElementById("displayText"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "welcome"; 
    } else { 
     ele.style.display = "welcome"; 
     text.innerHTML = "Planning Statements"; 
     document.getElementById("toggleText1").style.display = 'none'; 
     document.getElementById("toggleText2").style.display = 'none'; 
    } 
} 

function welcome1() { 
    var ele = document.getElementById("toggleText1"); 
    var text = document.getElementById("displayText1"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "welcome 1"; 
    } else { 
     ele.style.display = "block"; 
     text.innerHTML = "welcome1"; 
     document.getElementById("toggleText").style.display = 'none'; 
     document.getElementById("toggleText2").style.display = 'none'; 
    } 
} 

function welcome2() { 
    var ele = document.getElementById("toggleText2"); 
    var text = document.getElementById("displayText1"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "welcome 2"; 
    } else { 
     ele.style.display = "block"; 
     text.innerHTML = "welcome2"; 

    } 
} 
    </script> 

        <li style="text-align:left; margin-left:5px;"><a id="displayText" href="javascript:welcome();">welcome</a></li> 
        <li style="text-align:left; margin-left:5px;"><a id="displayText1" href="javascript:welcome1();">welcome 1</a></li> 
        <li style="text-align:left; margin-left:5px;"><a id="displayText2" href="javascript:welcome2();">welcome 2</a></li> 

    <div id="toggleText" style="display: none"> 
    <p>Welcome World!</p> 
    </div> 
    <div id="toggleText1" style="display: none"> 
    <p>Welcome World again!</p> 
    </div> 
    <div id="toggleText2" style="display: none"> 
    <p>Welcome World again wow!</p> 
    </div>

對我來說這是有效的。當你受歡迎時，它顯示歡迎世界。當你打到歡迎1 ....它保持歡迎的世界，然後再次顯示歡迎的世界。

如果功能歡迎1打開，反正有關閉功能。

來源

2013-04-12 lecardo

此代碼必須被調用或附加到事件處理程序的某處，但不清楚在哪裏。你所有的script標籤都定義了兩個函數。 'welcome（）;'和'welcome1（）;'或者'document.getElementById（'toggleText'）''還有其他什麼東西？查找HTML被點擊的位置或.js文件或html onclick =「toggleText（）」屬性，在知道更多信息時應避免使用該屬性。 –

你向我展示了兩個函數，它們永遠不會被可能觸發它們的事件觸發或引用，並且兩個div中帶有段落標籤的div將不會因爲樣式屬性設置而出現。這裏什麼都沒有發生。如果某件事實際上是動態發生的，那麼我認爲你的意思是「作品」，這並不是全部。你在看服務器代碼嗎？在瀏覽器中查看源代碼。這就是完全可以看到實際構建和提供的HTML的地方。 –

請使用一些縮進，併發布所有相關的代碼，以獲得更好，更快的答案。 –

這應做到：

<script language="javascript"> 

function welcome() { 
    var ele = document.getElementById("toggleText"); 
    var text = document.getElementById("displayText"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "Welcome"; 
    } else { 
     ele.style.display = "block"; 
     text.innerHTML = "Welcome"; 
     document.getElementById("toggleText1").style.display = 'none'; 
    } 
} 

function welcome1() { 
    var ele = document.getElementById("toggleText1"); 
    var text = document.getElementById("displayText1"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "Welcome 1"; 
    } else { 
     ele.style.display = "block"; 
     text.innerHTML = "Welcome 1"; 
     document.getElementById("toggleText").style.display = 'none'; 
    } 
} 
</script> 

<div id="toggleText" style="display: none"> 
<p>Welcome World!</p> 
</div> 
<div id="toggleText1" style="display: none"> 
<p>Welcome World again!</p> 
</div>

你有什麼是當你隱藏顯示元素，請確保您隱藏另一個。

來源

2013-04-12 22:38:16 Kenneth

謝謝你的回答！它爲我做了。最後一個問題，比方說我有另一個叫welcome2的函數，和其他2個函數一樣，並且有toggletext2和。displaytext2 ，你必須隱藏部分......我想這對歡迎和welcome1：的document.getElementById（「toggleText1」）的style.display = '無'; 的document.getElementById（「toggleText2」）。 style.display ='none'; 但是我沒有隱藏它的運氣如果這有助於理解 – lecardo

它也是一樣的概念，你只需要使用getElementById獲取元素並設置「style」。 display ='none'「。當你添加一個新的時候，記得也要添加它們前兩個功能。順便說一句：不要忘了接受答案，如果它幫助你 – Kenneth

關閉1當另一個打開的JavaScript選項卡

回答

相關問題