javascript - 单击事件后显示特定 div 并隐藏所有其他 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);

    }
  });

});

P.s.:我知道 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>