Javascript 如何切换`<；div>；`单击另一个div时的项目？

我有这样的

结构

<!-- Parent -->     
<div id="parentCategory" >
    <input type="image" src="a.jpg" onClick="showNextCat('nextCategory1', 'block', 'nextCategory2', 'nextCategory3')" />
    <input type="image" src="b.jpg" onClick="showNextCat('nextCategory2', 'block', 'nextCategory1', 'nextCategory3')" />
    <input type="image" src="c.jpg" onClick="showNextCat('nextCategory3', 'block', 'nextCategory1', 'nextCategory2')" />
    ...
</div>

<!-- 1st Child -->      
<div id="nextCategory1" style="display: none;">
    <input type="image" src="1a.jpg" />
    <input type="image" src="1b.jpg" />
</div>


<!-- 2nd Child -->      
<div id="nextCategory2"  style="display: none;">
    <input type="image" src="2a.jpg" />
    <input type="image" src="2b.jpg" />
</div>  


<!-- 3rd Child -->      
<div id="nextCategory3"  style="display: none;">
    <input type="image" src="3a.jpg" />
    <input type="image" src="3b.jpg" />
</div>

我不想硬编码

showNextCat（）

方法来隐藏

未选中的

请即兴使用JS方法。
使用jQuery，您可以使这变得简单。首先，从按钮中删除所有的
onClick
事件。然后，必须为所选div定义css类：

.selected  {
   display : block;
}

然后在按钮上指定相关类别的id，例如

<input type="image" src="a.jpg" select-category="nextCategory1" />

注意：这不是唯一的解决方案。
如果使用jquery，也有两种可能的选择
那就容易多了

让我们先看看jQuery的解决方案

将
class=“category”
应用于要动态操作的所有元素

在html中输入要显示的值，如
data show=“nextCategory1”

应用css

.category{
    display:none;
}


把这个JS函数

$('#parentCategory input').on('click',function(e){
    $('.category').hide();
    $('#'+$(this).data('show')).show();
});



现在让我们看看Javascript解决方案，它也有点类似

function showNextCat(id) {
var item = document.getElementById(id);
var elem = document.querySelectorAll(".category")
var i;
for (i = 0; i < elem.length; i++) {
    elem[i].style.display='none';
}
    item.style.display='block';
}  

函数showNextCat（id）{
var item=document.getElementById（id）；
var elem=document.querySelectorAll（“.category”）
var i；
对于（i=0；i

您可以使用jQuery提供的
切换类（className）
您也不应该使用内联JS，您知道。。。如果你打算使用jQuery，现在是时候几乎完全重写你的JS代码了。。我将使用jQuery
toggleClass
。。。有任何链接或示例吗？@ShadabMehdi类似。
$('#parentCategory input').on('click',function(e){
    $('.category').hide();
    $('#'+$(this).data('show')).show();
});

function showNextCat(id) {
var item = document.getElementById(id);
var elem = document.querySelectorAll(".category")
var i;
for (i = 0; i < elem.length; i++) {
    elem[i].style.display='none';
}
    item.style.display='block';
}