显示特定的div并隐藏所有其他点击事件

Question

后我有三个div元素：页面加载

<div class="hide_banner" id="1"><img src="1.png"></div> 
<div class="hide_banner" id="2"><img src="2.png"></div> 
<div class="hide_banner" id="3"><img src="3.png"></div> 

之后，用户应该只看到第一个DIV。这里是JS/JQ代码（这完全适用）：

$(document).ready(function() { 
    $('.hide_banner').not('#' + 1).hide(3000); 
}); 

用户可以通过点击此页面上的链接挑选另一面大旗：

<ul class="dropdown-menu" role="menu"> 
    <li><a href="#1" class="show_banner">Image 1</a></li> 
    <li><a href="#2" class="show_banner">Image 2</a></li> 
    <li><a href="#3" class="show_banner">Image 3</a></li> 
</ul> 

点击例如第三链接（后href =“＃3”）id =“1”的div应该隐藏，id =“3”的div会被显示出来。我有一个想法如何维护与PHP相关的问题，但我只想用JS/jQ解决它，所以请帮助！ ;）这里是我JS/JQ码不起作用：

$(document).ready(function() { 
    $('.hide_banner').not('#' + 1).hide(3000); 
    $('a').click(function() { 
    var id = $(this).attr('href'); 

    if(id == 1) { 
     $(id).show(3000); 
     $('#2').hide(3000); 
     $('#3').hide(3000); 

    } 

    if(id == 2) { 
     $(id).show(3000); 
     $('#1').hide(3000); 
     $('#3').hide(3000); 

    } 

    if(id == 3) { 
     $(id).show(3000); 
     $('#1').hide(3000); 
     $('#2').hide(3000); 

    } 
    }); 

}); 

PS：我知道这是不正确的以数字开头的ID名称;）

Answer 1

真的，没有必要if...else逻辑在这里，也没有任何需要指定第一个ID - 只需使用:first：

$('.hide_banner').not(':first').hide(3000); 
 
$('a').click(function() { 
 
    var id = $(this).attr('href'); 
 
    $(id).show(3000); 
 
    $('.hide_banner').not(id).hide(3000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="hide_banner" id="1">1</div> 
 
<div class="hide_banner" id="2">2</div> 
 
<div class="hide_banner" id="3">3</div> 
 

 

 
<ul class="dropdown-menu" role="menu"> 
 
    <li><a href="#1" class="show_banner">Image 1</a></li> 
 
    <li><a href="#2" class="show_banner">Image 2</a></li> 
 
    <li><a href="#3" class="show_banner">Image 3</a></li> 
 
</ul>

Answer 2

你alrea DY知道如何使用jQuery not，所以用它来排除选定的目标：

的jsfiddle：http://jsfiddle.net/vk94mmv2/2/

$(document).ready(function() { 
    $('.hide_banner:not(:first)').hide(3000); 
    $('a').click(function() { 
     var id = $(this).attr('href'); 
     var $show = $(id); 
     $show.show(3000); 
     $('.hide_banner').not($show).hide(3000); 
    }); 
}); 

注意：您可以更改第一选择使用:not(:first)伪选择所有选择，但在第一个横幅。