-1

可能重复：
在纯 JavaScript 中删除/添加类的解决方案是什么？

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

我正在构建一个包含一系列缩略图的图片库，这些缩略图都分配了类；.photo,.print和.logo. 希望有四个“按钮”；照片，打印，标志和显示所有。当用户单击“照片”时，代码会将 .photo 设置为display:block，.print并将 .logo 设置为display:none。当用户单击“打印”时，代码会将 .print 设置为display:block，并将 .photo 和 .logo 设置为display:none。当用户点击“logo”时，代码会将 .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>
4

2 回答 2

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>
于 2013-01-06T18:22:13.827 回答
0

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

  1. 在要响应click事件的链接上添加事件侦听器
  2. 单击时，浏览所有匹配元素并更改其样式

缓存你的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);
于 2013-01-06T18:37:53.313 回答