Question

可能重复：
what is the solution to remove/add a class in pure javascript?

首先原谅似乎是一个简单的javascript问题，我刚刚开始掌握这门语言。我已经看过很多关于通过类或ID显示和隐藏内容的帖子，但它们似乎一次只适用于一个。我想一次更改三个类，显示更改取决于用户已准备好点击的链接。令人困惑的解释我知道，但我的代码示例如下。

我正在构建一个包含一系列缩略图的图库，这些缩略图都分配了类; .photo，.print和.logo。希望有四个“按钮”;所有照片，打印，徽标和显示。当用户点击“照片”时，代码会将.photo设置为display:block，将.print和.logo设置为display:none。当用户点击“打印”时，代码会将.print设置为display:block，将.photo和.logo设置为display:none。当用户点击“徽标”时，代码会将.logo设置为display:block，将.photo和.print设置为display:none。显然，当用户点击“全部显示”时，所有类都设置为display:block。

<div id="menu">
<ul class"toplevel">
<li id="photoselect"><a href="photo.html">Photography</a></li>
<li id="logoselect"><a href="logo.html">Print</a></li>
<li id="printselect"><a href="print.html">Logo</a></li>
</ul>
</div>
<div id="content">
<a href="photo/photo01.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb photo" src="photo/photo01.jpg"></a>
<a href="photo/photo02.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb photo" src="photo/photo02.jpg"></a>
<a href="photo/photo03.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb print" src="photo/photo03.jpg"></a>
<a href="photo/photo04.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb print" src="photo/photo04.jpg"></a>
<a href="photo/photo05.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb logo" src="photo/photo05.jpg"></a>
<a href="photo/photo06.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb logo" src="photo/photo06.jpg"></a>
</div>

Answer 1

或者你可以利用css3（支持它的浏览器）

<!doctype html>
<html>
<head>
<style>
#content > input.hidden{ display:none; }
#content > a{ display:none; }
#po:checked ~ a.photo{ display:block; }
#pi:checked ~ a.print{ display:block; }
#lo:checked ~ a.logo{ display:block; }
#al:checked ~ a{ display:block; }
</style>
</head>
<body>
<div id="menu">
<ul class"toplevel">
<li><label for="po">Photography</label></li>
<li><label for="pi">Print</label></li>
<li><label for="lo">Logo</label></li>
<li><label for="al">All</label></li>
</ul>
</div>
<div id="content">
<input type="radio" name="bfc" id="po" class="hidden" />
<input type="radio" name="bfc" id="pi" class="hidden" />
<input type="radio" name="bfc" id="lo" class="hidden" />
<input type="radio" name="bfc" id="al" class="hidden" />
<a href="photo/photo01.jpg" class="photo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo01.jpg"></a>
<a href="photo/photo02.jpg" class="photo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo02.jpg"></a>
<a href="photo/photo03.jpg" class="print" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo03.jpg"></a>
<a href="photo/photo04.jpg" class="print" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo04.jpg"></a>
<a href="photo/photo05.jpg" class="logo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo05.jpg"></a>
<a href="photo/photo06.jpg" class="logo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo06.jpg"></a>
</div>
</body>
</html>

Answer 2

只是为了让您了解如何在没有任何库的情况下（以及您发布的HTML），这是一个基本的方法：

在您要响应

click

点击后，浏览所有匹配的元素并更改其样式

最好缓存您的photos prints和logos，这样您就不必在每次点击时都查询它们。

var content = document.getElementById('content'); 
var photos = content.getElementsByClassName('photo');
var prints = content.getElementsByClassName('print');
var logos = content.getElementsByClassName('logo');

function changeDisplay(elements, display) {
  var i = 0, l = elements.length;
  for( ; i < l; i++) {
    elements[i].style.display = display;
  }
}

document.getElementById('photoselect').addEventListener('click', function (e) {
  changeDisplay(prints, 'none');
  changeDisplay(logos, 'none');
  changeDisplay(photos, 'block');
}, false);

使用javascript显示/隐藏多个类

2 个答案: