Question

我的HTML页面上有以下CSS：

<style type="text/css">
    .hidden           {display:none;}
    .visible          {display:block;}
</style>

几乎每个页面上都属于这些CSS样式中的一个或另一个。我需要的是将所有内容交换到相反数字的javascript ....每一个隐藏都变得可见，反之亦然。

我在之前的项目中使用了类似的东西，但它只允许我一次交换一个东西，并迫使我直接指定它的ID。我需要的是一个全局的'如果可见 - 改为隐藏 - 反之亦然'脚本。

代码（我尝试并且未能扩展以具有此行为）如下所示：

<script type="text/javascript">
    function toggle(divID) {var item = document.getElementById(divID); if (item) {item.className=(item.className=='hidden')?'visible':'hidden';}}
</script>

有什么想法吗？

Answer 1

<style type="text/css">
.hidden           {display:none;}
.visible          {display:block;}
.temp           {display:none;}
</style>

function swap() {
$('.hidden').removeClass('hidden').addClass('temp');
$('.visible').removeClass('visible').addClass('hidden');
$('.temp').removeClass('temp').addClass('visible');
}

Answer 2

只需使用jQuery

$('.hidden').removeClass('.hidden').addClass('.visible');

如何在HTML页面中的每个元素上交换两个类

2 个答案: