JS和HTML隱藏div不工作

我建立了一個只使用一個頁面的標籤欄網站，我使用js來隱藏3個元素並顯示一個。當我點擊鏈接顯示一個和隱藏其他的一切都搞亂了，顯示3或2是隨機的。這是我的代碼。JS和HTML隱藏div不工作

function unhide(divID, otherDivId, otherDivId, otherDivId) { 
 
    var item = document.getElementById(divID); 
 
    if (item) { 
 
    item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden'; 
 
    } 
 
    document.getElementById(otherDivId).className = 'hidden'; 
 
}

.hidden { 
 
    display: none; 
 
} 
 

 
.unhidden { 
 
    display: block; 
 
}

<div id="tweaked" class="hidden"> 
 
    <p>Test1</p> 
 
    <footer class="bottom"> 
 
    <a class="tab current" href="javascript:unhide('home', 'tweaked', 'other', 'more')">Home<i class="material-icons">home</i></a> 
 
    <a class="tab" href="javascript:unhide('tweaked', 'home', 'other', 'more')">Tweaks<i class="material-icons">view_headline</i></a> 
 
    <a class="tab" href="javascript:unhide('other', 'home', 'tweaked', 'more')">Other<i class="material-icons">view_headline</i></a> 
 
    <a class="tab" href="javascript:unhide('more', 'tweaked', 'other', 'more')">More<i class="material-icons">share</i></a> 
 
    </footer> 
 
</div>

來源

2017-08-28 Will Mays

'otherDivId，otherDivId，otherDivId'你有什麼期望那要做？ – epascarello

@epascarello有4個div，當你取消隱藏1時，它隱藏了其他的3 –

這是一個非常非常壞的習慣，有一個內嵌的JavaScript（在你的錨）和一個腳本。我會把一切都移到腳本上。 – Sablefoste

也許你想是這樣的：

var anchors = document.querySelectorAll(".bottom .tab"), 
 
    showHide = function(e) { 
 
     var parent = this.parentNode; 
 
     
 
     anchors.forEach(a => { 
 
     var relatedDiv = document.getElementById(a.dataset.tab), 
 
      aClass = a.className.trim(); 
 
     
 
     if (a.dataset.tab != this.dataset.tab) { 
 
      relatedDiv.className = relatedDiv.className.replace("unhidden", "") + " hidden"; 
 
      a.className = aClass.replace("current", ""); 
 
     } else { 
 
      relatedDiv.className = relatedDiv.className.replace("hidden", "") + " unhidden"; 
 
      a.className = aClass.replace("current", "") + " current"; 
 
     } 
 
     }); 
 
    }; 
 

 
anchors.forEach(a => a.addEventListener("click", showHide));

.hidden{ 
 
    display:none; 
 
} 
 
.unhidden{ 
 
    display:block; 
 
}

<div id="home" class="unhidden"> 
 
    <p>Home</p> 
 
</div> 
 
<div id="tweaked" class="hidden"> 
 
    <p>Tweaks</p> 
 
</div> 
 
<div id="other" class="hidden"> 
 
    <p>Other</p> 
 
</div> 
 
<div id="more" class="hidden"> 
 
    <p>More</p> 
 
</div> 
 
<footer class="bottom"> 
 
    <a class="tab current" href="#" data-tab="home">Home<i class="material-icons">home</i></a> 
 
    <a class="tab" href="#" data-tab="tweaked">Tweaks<i class="material-icons">view_headline</i></a> 
 
    <a class="tab" href="#" data-tab="other">Other<i class="material-icons">view_headline</i></a> 
 
    <a class="tab" href="#" data-tab="more">More<i class="material-icons">share</i></a> 
 
</footer>

來源

2017-08-28 20:53:03 DontVoteMeDown

每個div中應該有一個頁腳，對應的「tab current」 –

@WillMays那樣？你真的不需要複製每個div的頁腳實際上.. – DontVoteMeDown

我改變基於它是什麼div的頁腳class值 –

你試過item.classList？ Element.classList | MDN

你可以嘗試這樣的事：

if(item.classList.contains("hidden")){ 
    item.classList.remove("hidden"); 
    item.classList.add("unhidden"); 
}else{ 
    item.classList.add("hidden"); 
    item.classList.remove("unhidden"); 
}

來源

2017-08-28 20:46:59 FelixMayer

這不起作用。做同樣的事情。 –

JS和HTML隱藏div不工作

回答

相關問題