Question

我有：

HTML CODE：

<div id="katy"> 

<div> 
<a href="javascript:void(0);" id="a"> Button 1 </a>
</div>

</div>

<div id="perry"> 

<div>
<a href="javascript:void(0);" style="display:none;" id="b"> Button 2 </a>
</div>

</div>

输出：

Button 1

我想要什么：

点击Button 1，它会显示Button 2。您点击Button 2，它会显示Button 1。

如何在点击内部div时切换这两个div？

Answer 1

如果您将display:none部分移至div而非链接，则会更容易。

<div id="katy"> <a href="javascript:void(0);" id="a"> Button 1 </a> </div>
<div id="perry" style="display:none;"> <a href="javascript:void(0);" id="b"> Button 2 </a></div>

然后你可以使用这个jQuery代码：

$('#a').click(function(){
    toggle();
});

$('#b').click(function(){
    toggle();
});

function toggle(){
    $('#katy').toggle();
    $('#perry').toggle();   
}

jsfiddle

Answer 2

添加点击处理程序并切换/显示/隐藏其他按钮。

示例Javascript：

var button1 = $('#a'),
    button2 = $('#b');

var toggle = function() {
    button1.toggle();
    button2.toggle();
};

button1.click(toggle);
button2.click(toggle);

Working jsfiddle example

Answer 3

只需创建<script></script>并使用JavaScript处理点击：

var a = document.getElementById("a"),
    b = document.getElementById("b");

a.onclick = function() {
    this.style.display = "inline";
    b.style.display = "none";
}

b.onclick = function() {
    this.style.display = "inline";
    a.style.display = "none";
}

如何在点击内部div时切换这两个div？

3 个答案: