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不工作

回答

相关问题