顯示特定的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)僞選擇所有選擇，但在第一個橫幅。