Question

如何简单地使用这段代码？我会在点击时显示1 div并隐藏其他div。

我为十个或更多div做这个......如何简单编码？

HTML

<div id="div1"><p>div1</p></div>

<div id="div2"><p>div2</p></div>

<div id="div3"><p>div3</p></div>

<div id="parte1"></div>

<div id="parte2"></div>

<div id="parte3"></div>

使用Javascript：

$("#parte1").on('click', function() {
   $("#div1").fadeIn(100);
   $("#div2").fadeOut();
   $("#div3").fadeOut();

});

$("#parte2").on('click', function() {
   $("#div1").fadeOut();
   $("#div2").fadeIn(100);
   $("#div3").fadeOut();

});

$("#parte3").on('click', function() {
   $("#div1").fadeOut();
   $("#div2").fadeOut();
   $("#div3").fadeIn(100);

});

Answer 1

您可以将它们全部更改为同一个类，然后使用：

$(".class").click(function(){

    $(".class").not($(this)).hide();

});

这可能有用，或类似的东西

Answer 2

您可以将html更改为此类

演示

http://jsfiddle.net/g4whs/5/

HTML

<div id="div1" class="div"><p>div1</p></div>

<div id="div2" class="div"><p>div2</p></div>

<div id="div3" class="div"><p>div3</p></div>

<div class="parte" id="parte1" data-num="1"></div>

<div class="parte" id="parte2" data-num="2"></div>

<div class="parte" id="parte3" data-num="3"></div>

和JS

$(".parte").on('click', function() {
    var n = $(this).data('num');
    $('.div').fadeOut();
    $('.div').eq(n-1).fadeIn(100);  
});

你实际上只是parseInt parte id并获得索引但是使用data-num，你可以改变你的ID或根本不使用它们

如何简单地使用这段代码？我会在点击时显示1 div并隐藏其他div

2 个答案: