Javascript 显示/隐藏单个div的简单方法？_Javascript_Jquery_Html_Css

Javascript 显示/隐藏单个div的简单方法？

javascript jquery html css

Javascript 显示/隐藏单个div的简单方法？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,在我的网站中，我有一些div，每当你点击一个div时就会切换，如下面的js fiddle所示： HTML <body> <div class="class1">Div 1</div> <div class="class2">Div 2</div> <div class="class1">Div 3</div> <div class="class2">Div 4</div> <d

在我的网站中，我有一些div，每当你点击一个div时就会切换，如下面的js fiddle所示：

HTML

<body>

<div class="class1">Div 1</div>
<div class="class2">Div 2</div>

<div class="class1">Div 3</div>
<div class="class2">Div 4</div>

<div class="class1">Div 5</div>
<div class="class2">Div 6</div>

<div class="class1">Div 7</div>
<div class="class2">Div 8</div>

</body>

Javascript

$(document).ready(function(){
$(".class1").click(function(){
    $(".class2").show();
    $(".class1").hide();
});
$(".class2").click(function(){
    $(".class1").show();
    $(".class2").hide();
});
});

现在我想要它，这样当我点击一个Div时，比如div1，就会显示div2，但与js fiddle不同，我想要它，这样div4、6和8也不会显示。我知道我可以通过给每个div一个唯一的类或id来做到这一点，但这需要很多时间，因为我正在处理，比如说，100个div。如果有任何简单的方法，只需单击一个div并将其与另一个div切换，而不必切换所有其他div。谢谢你的帮助

使用

.next（）

和

.prev（）

。假设要切换下一个和上一个元素

$(document).ready(function(){
$(".class1").click(function(){
    $(".class2").show();
    $(".class1").hide();
});
$(".class2").click(function(){
    $(".class1").show();
    $(".class2").hide();
});
});

$(document).ready(function(){
    $(".class1").click(function(){
        $(this).toggle();
        $(this).next().toggle();
    });
    $(".class2").click(function(){
        $(this).toggle();
        $(this).prev().toggle();
    });
});