Question

我有3个div，每个都有2个可能的图像标签（活动或非活动）。如果单击一个div激活，则必须将其他div设置为非活动状态。如何使用img标签完成此操作以及如果用户禁用了javascript会发生什么？

Answer 1

你的意思是这样吗？

<div class="block" id="block1">
    <img src='inactive_block1.jpg'>
</div>

<div class="block" id="block2">
    <img src='inactive_block2.jpg'>
</div>

<div class="block" id="block3">
    <img src='inactive_block3.jpg'>
</div>

使用像jQuery这样的库，javascript看起来像：

$(function() {
    $('.block').click(function() {
       $('#block1').find('img').attr('src', 'inactive_block1.jpg');
       $('#block2').find('img').attr('src', 'inactive_block2.jpg');
       $('#block3').find('img').attr('src', 'inactive_block3.jpg');
       $(this).find('img').attr('src', 'active_' + $(this).attr('id') + '.jpg');
    });
});

有了上述内容，如果你有inactive_block1.jpg，inactive_block2.jpg，inactive_block3.jpg和active_block1.jpg，active_block2.jpg和active_block3.jpg，你应该得到你的想。

取决于您是否希望大量受众群体禁用javascript，这取决于您是否值得使用javascript禁用后备功能。

Answer 2

如果用户禁用了JavaScript，那么您无法做任何基于JavaScript的操作来处理动态修改页面。您唯一的另一个选择是创建一个“已弃用”的功能版本，每次点击后都需要页面请求。

我建议研究如何从DOM中的元素动态添加/删除类，这就是我将如何解决这个问题。您可以轻松地对所有在“点击”处于“活动”状态的元素执行jQuery选择，并在其上设置“禁用”类，这样您基本上会将除了单击元素之外的所有内容都弄清楚。

这有意义吗？

jquery互斥点击

2 个答案: