在 JavaScript 中隱藏和顯示多個按鈕

Question

所以我有多個按鈕在點擊時顯示。 但是，如果單擊另一個按鈕，我很難隱藏內容。

---

Javascript 代碼如下所示

function portFunction() {
    var e = document.getElementById("test2").style;
    if(!e.display | e.display == "none"){
        e.display = "block";
    }
else{
    e.display = "none";
    }
}

和 html

<nav>
     <ul>   
        <li onclick="portFunction();"><a href="#">Portfolio</a></li>
        <li onclick="blogFunction();"><a href="#">Blog</a></li>
     </ul>
    </nav>

如果單擊另一個按鈕，我該如何做到這一點，它會隱藏最后一個打開的按鈕的內容並顯示新的按鈕內容？

編輯片段代碼，好的，所以如果您單擊投資組合，將顯示一些文本。 但是，如果您單擊博客，則會顯示一些其他文本，但仍會顯示來自 Portfolio 的文本。 我想要的是，如果您單擊“投資組合”按鈕，然后單擊“博客”按鈕，投資組合中的文本應該消失。 我希望每個按鈕都有這個。

 function blogFunction() { var e = document.getElementById("test").style; if(!e.display | e.display == "none"){ e.display = "block"; } else{ e.display = "none"; } } function portFunction() { var e = document.getElementById("test2").style; if(!e.display | e.display == "none"){ e.display = "block"; } else{ e.display = "none"; } }

 @import url(http://fonts.googleapis.com/css?family=Open+Sans); .center{ font: 100% open sans, sans-serif; margin:0; padding:0; } #test{ display:none; height:20%; width:20%; z-index:11; position:absolute; left:50%; right: 50%; } .testText{ color:red; z-index:11; } #test2{ display:none; height:20%; width:20%; z-index:11; position:absolute; left:50%; }

 <nav> <ul> <li class="current"><a href="#">Home</a></li> <li onclick="portFunction();"><a href="#">Portfolio</a></li> <li onclick="blogFunction();"><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Preview</a></li> </ul> </nav> <div class="center"> <div id="test"> <h1 class="testText"> Test </h1> </div> <div id="test2"> <h1 class="testText"> Test2 </h1> </div> </div>

Answer 1

一種更簡單的方法是使用classes和 jQuery 的eq() ，如下所示：

 $('.section-link').click(function() { var cur = $('.section-link').index($(this)); // get the index of the clicked link $('.section-display').removeClass('active'); // hide all of the sections $('.section-display').eq(cur).addClass('active'); // show the section at the same index of the clicked link });

 .section-display:not(.active) { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <ul> <li class="section-link"><a href="#">Portfolio</a> </li> <li class="section-link"><a href="#">Blog</a> </li> </ul> </nav> <br> <br> <div class="section-display active">Section One</div> <div class="section-display">Section Two</div>

為了回應您的評論，讓我們逐行查看代碼：

一、 CSS規則.section-display:not(.active) { display: none; } .section-display:not(.active) { display: none; }隱藏每一個具有類元件section-display ，除非它也有類active 。 這會隱藏所有 div，但如果您希望默認顯示特定部分，則允許您添加active類。

在 jQuery 中， $('.section-link').click(function() { }); 是一個點擊處理程序。 基本上，它表示當有人單擊具有section-link類的元素時，運行此塊中的代碼

在處理程序內部，變量$(this)指代一個 jQuery 對象，該對象表示被單擊的元素（在您的情況下為鏈接）。

第一行， var cur = $('.section-link').index($(this)); 說，將所有具有類section-link （所有鏈接）的元素收集到一個數組中，並給我被點擊的元素的index 。 所以現在我們知道用戶點擊了第二個鏈接。

下一行$('.section-display').removeClass('active'); 從所有具有類section-display的 div 中刪除active類，該類由於 css 規則隱藏了所有 div

在下一行$('.section-display').eq(cur).addClass('active'); , $('.section-display')將所有具有section-display類的 div 收集到一個數組中（這些是帶有內容的 div）。 之后.eq(cur)從數組中選擇與單擊的鏈接具有相同索引的 div。 最后.addClass('active')將類active添加到顯示 the4 元素的元素中，因為 css 規則。

所以現在，點擊第一個section-link元素將顯示第一個section-display div 並隱藏所有其他元素。 單擊第二個section-link元素將顯示第二個section-display div 並隱藏所有其他元素。 等等...

Answer 2

我添加了一個 callLastFunc() 函數，它保存並調用上一個函數，隱藏上一個函數調用添加的內容。

 var lastCalled = null; function callLastFunc(arg) { if (arg[0]) return; if (lastCalled) lastCalled("byCallPrev"); lastCalled = arg.callee; } function blogFunction() { var e = document.getElementById("test").style; if(!e.display | e.display == "none"){ e.display = "block"; } else{ e.display = "none"; } callLastFunc(arguments); } function portFunction() { var e = document.getElementById("test2").style; if(!e.display | e.display == "none"){ e.display = "block"; } else{ e.display = "none"; } callLastFunc(arguments); }

 @import url(http://fonts.googleapis.com/css?family=Open+Sans); .center{ font: 100% open sans, sans-serif; margin:0; padding:0; } #test{ display:none; height:20%; width:20%; z-index:11; position:absolute; left:50%; right: 50%; } .testText{ color:red; z-index:11; } #test2{ display:none; height:20%; width:20%; z-index:11; position:absolute; left:50%; }

 <nav> <ul> <li class="current"><a href="#">Home</a></li> <li onclick="portFunction();"><a href="#">Portfolio</a></li> <li onclick="blogFunction();"><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Preview</a></li> </ul> </nav> <div class="center"> <div id="test"> <h1 class="testText"> Test </h1> </div> <div id="test2"> <h1 class="testText"> Test2 </h1> </div> </div>

Answer 3

嗯，您最好使用框架，但這就是您想要的，對嗎？ 這個例子使用了 vanillaJS 框架，它非常強大，開箱即用 ;)

 // lib.js sitesContent = {}; // blog.js sitesContent['blog'] = "Blog content"; // You can use templates like handlebars // portfolio.js sitesContent['portfolio'] = "Portfolio content"; // Better to use templates // app.js function navAction(site) { document.getElementById('content').innerHTML = sitesContent[site]; } navAction('portfolio'); // Means load portfolio when loaded first time

 <nav> <ul> <li><a onclick="navAction('portfolio')" href="#">Portfolio</a></li> <li><a onclick="navAction('blog')" href="#">Blog</a></li> </ul> </nav> <div id="content"></div>