我有三个 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 的名字以数字开头是不正确的;)
最佳答案
真的,这里不需要 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>
关于javascript - 单击事件后显示特定 div 并隐藏所有其他 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26785094/