我有两个DIV标签,分别是respond-1和respond-2。我想用按钮选择这些div。当我点击respond1Button它应该显示响应-1 div和类似的点击repond2Button,响应-2 div将被显示。使用jQuery按钮选择DIV
默认页面应该显示respond-1 div。
我有两个DIV标签,分别是respond-1和respond-2。我想用按钮选择这些div。当我点击respond1Button它应该显示响应-1 div和类似的点击repond2Button,响应-2 div将被显示。使用jQuery按钮选择DIV
默认页面应该显示respond-1 div。
对于像下方的HTML,
<div id="container">
<div id="respond-1" class="responses">Respond 1</div>
<div id="respond-2" class="responses" style="display: none" >Respond 2</div>
</div>
<button id="respond1Button">Respond 1</button>
<button id="respond2Button">Respond 2</button>
下面是脚本来显示基于相应的按钮,点击/隐藏,
$(function() {
var $respond1 = $('#respond-1');
var $respond2 = $('#respond-2');
var $responses = $('.responses');
$('#respond1Button').click(function() {
$responses.hide();
$respond1.show();
});
$('#respond2Button').click(function() {
$responses.hide();
$respond2.show();
});
});
你在找这样的吗?
<div id="respond-1">First Response<div>
<div id="respond-2" style="display:none;">Second Response<div>
<button type="button" onclick="$('#respond-1').show();$('#respond-2').hide():">repond1Button</button>
<button type="button" onclick="$('#respond-2').show();$('#respond-1').hide():">repond2Button</button>
您可以使用.click
事件来绑定点击处理程序。使用$('#id')
选择具有ID的元素,因此将这两个元素组合在一起可以轻松创建使div可见的按钮。
<div id="respond-1"></div>
<button id="respond1Button">Show Respond 1</button>
// on DOM ready...
$(function() {
// Select the divs
var resp1 = $('#respond-1');
// Hide them to start
resp1.hide();
// Bind click handlers
$('#respond1Button').click(function() {
resp1.show();
});
});
请注意,您不能具有多个具有相同ID属性的itens,并且DIV标签没有名为NAM的属性E.
在这种情况下,我想最好的选择是为BUTTON和DIV定义一个类'respond-1'。根据所点击的按钮的类别,我们显示通讯员DIV。 (对不起,任何英文错误,它不是我的母语):)
$(document).ready(function(){
$('button.respond-1, button.respond-2').click(function(){
$('div.respond-1, div.respond-2').hide();
$('div.' + $(this).attr('class')).show();
});
});
你能发布一些你的html吗? – shanabus