使多个按钮在 JavaScript 中隐藏和显示

一个更简单的方法是使用 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的元素，除非它也有类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。 最后，由于 css 规则，.addClass('active')将类active添加到显示 4 元素的元素中。

所以现在，单击第一个section-link元素将显示第一个section-displaydiv 并隐藏所有其他元素。单击第二个section-link元素将显示第二个section-displaydiv并隐藏所有其他元素。等等...

我添加了一个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>

嗯，你最好使用框架，但这是你想要的吧？这个例子使用了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>